Angular.js 或类似的显示 json？

Question

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

我发现让 Web 应用程序使用 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 函数..

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

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

---

关于 Angular 的入门

• Angularjs (tutorial, videos)
• Egghead.io - 这是我学习时最喜欢的研究。他走得很快，但视频简短、中肯，并且不断有新的技巧/功能解释。他的一些视频需要注册一个专业帐户。其中很大一部分是免费的（尤其是早期的）