Angular.js or similar to display json?

My nodejs app reads a json file, updates it when things change (via automated sensors) and then sends it to the web app over socket.io for manual control which in turn can update the json file.

I find it a little cumbersome and tricky to get the web app to display this data with the jQuery/js for (key in val).. append.. and didn't like the .each() jQuery approach. It's still simple to add new things by just adding new objects to the json file. I'm thinking about open sourcing it and I've read about Angular.js and think its ng-repeat, ng-show, ng-filter etc.. way of doing things could be helpful.

The json below isn't my real json but it follows the same structure.

Heres the jQuery.

$.getJSON( "/db.json", function( data ) {
            var things = [],
            n = 0;
            for (var i in data) {
                things.push(
                    "<div class=\"group\"><strong class=\"title\">"+Object.keys(data)[n]+"</strong><br>"
                )
                n++;
                a = 0;
                    for (var x in data[i]) {
                        things.push(
                            "<div>"+data[i][x].name+""
                        )
                        a++;
                        b = 0;
                        for (var y in data[i][x].actions) {
                            things.push(
                            "<button onclick=sendCommand('"+
                            data[i][x].command+
                            "',"+
                            data[i][x].pin+
                            ","+
                            data[i][x].actions[y]+
                            ")>"+
                            Object.keys(data[i][x].actions)[b]+
                            "</button>"
                            )
                        b++;
                        }things.push("</div>")
                    }things.push("</div>")
            }
                $(things.join( "" )).appendTo( "#buttons" );
        });

Javascript func..

function sendCommand(command, pin, val) {
    socket.send( command +" "+ pin +" "+ val);
}

and heres the json.

{   
    "Lights":[{
        "name": "light-one",
        "pin":"3",
        "command":"gpioDo",
        "actions": {
            "on":"1",
            "off":"0"
        }
    },{
        "name": "light-two",
        "pin":"5",
        "command":"gpioDo",
        "actions": {
            "on":"1",
            "off":"0"
        }
    },{
        "name": "light-three",
        "pin":"7",
        "command":"gpioDo",
        "actions": {
            "on":"1",
            "off":"0"
        }
    }],
    "Locks":[{
        "name": "lock-one",
        "pin":"8",
        "command":"gpioDo",
        "actions": {
            "on":"1",
            "off":"0"
        }
    },{
        "name": "lock-two",
        "pin":"12",
        "command":"gpioDo",
        "actions": {
            "on":"1",
            "off":"0"
        }
    }]
}

My question is would Angular.js or something similar provide an easier way to present the json? and is just watching keynotes the best place to start?

Thanks,

RWXES

Angular is great for looping over data. That was one of the main reasons my team started looking into it initially.

I took your data and showed you one way of looping over it. Demo

The more levels of nesting that you have, the harder it is to nicely repeat over it (if you want to display all of it with minimal HTML. There are a lot of different ways to approach this. A custom directive could be built to handle repeating, additional markup could be added, etc. But it all comes down to your understanding of Angular, your willingness to learn more, and how you're needing to use the data.

<table>
  <thead>
    <tr>
      <th>Type</th>
      <th>Name</th>
      <th>Pin</th>
      <th>Command</th>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody ng-repeat='(key,type) in data'>
    <tr ng-repeat='item in type'>
      <td>{{key}}</td>
      <td>{{item.name}}</td>
      <td>{{item.pin}}</td>
      <td>{{item.command}}</td>
      <td><span ng-repeat='(k,v) in item.actions'>{{k}}={{v}}&nbsp;</span></td>
    </tr>
  </tbody>
</table>

I showed 2 different ways to display the data. One is just showing everything. Simply repeats over all the data (in a basic way). The other is allowing you to choose a product (lights or locks) and then showing/hiding data from there.

As far as getting started with Angular

  • Angularjs (tutorial, videos)
  • Egghead.io - this is my favorite research when learning. He goes fast, but keeps videos short, to the point, and continually has new tricks/feature explanations. Some of his videos require signing up for a pro account. A large chunk of them are free (especially earlier ones)