Question

我的nodejs应用程序读取一个json文件，在事情发生变化时更新（通过自动传感器），然后通过socket.io将其发送到Web应用程序进行手动控制，从而可以更新json文件。

我发现让网络应用程序使用jQuery / js for (key in val).. append..显示这些数据并且不喜欢.each() jQuery方法有点麻烦和棘手。通过向json文件添加新对象来添加新内容仍然很简单。我正在考虑开源，我已经读过Angular.js并认为它的ng-repeat，ng-show，ng-filter等。做事方式可能会有所帮助。

下面的json不是我真正的json，但它遵循相同的结构。

继承人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);
}

和继承人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"
        }
    }]
}

我的问题是Angular.js或类似的东西提供了一种更简单的方式来呈现json？并且只是观看主题演讲的最佳起点？

谢谢，

RWXES

Answer 1

Angular非常适合循环数据。这是我的团队最初开始研究它的主要原因之一。

我拿走了你的数据并向你展示了一种循环方式。的 Demo

你拥有的嵌套级别越高，就越难以重复它（如果你想用最少的HTML显示所有嵌套。有很多不同的方法可以解决这个问题。一个自定义指令可能是为了处理重复，可以添加额外的标记，等等。但这一切都取决于您对Angular的理解，您是否愿意学习更多，以及您需要如何使用这些数据。

<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}} </span></td> </tr> </tbody> </table>

我展示了两种不同的方式来显示数据。一个是展示一切。只需重复所有数据（以基本方式）。另一种是允许您选择产品（灯或锁），然后显示/隐藏数据。

开始使用Angular

Angularjs（tutorial，videos）

Egghead.io - 这是我学习时最喜欢的研究。他走得很快，但保持视频简短，到目前为止，并不断有新的技巧/功能解释。他的部分视频需要注册专业帐户。其中很大一部分是免费的（特别是早期的）

Angular.js或类似于显示json？

1 个答案: