如何使用 Angular.js 将 JSON 数组中的元素添加到网格中答案

【问题标题】：How to add elements from a JSON array to a grid using Angular.js如何使用 Angular.js 将 JSON 数组中的元素添加到网格中
【发布时间】：2015-08-04 12:24:20
【问题描述】：

我在文件data.json 中有一个JSON 数组，如下所示：

var info = [{
"place": "Turkey",
"username": "jhon"
}, {
"place": "Dubai",
"username": "bruce"
}, {
"place": "Italy",
"username": "Wayne"
}];

我可以使用循环访问这些内容并在警报框的帮助下进行检查。但是，我希望以表格的形式显示内容。我可以使用JavaScript 或有人建议我也可以使用Angular.js。知道我可以用什么方式相处会更容易吗？

【问题讨论】：

标签： javascript json angularjs html

【解决方案1】：

如果您打算使用 angular 来将 JSON 显示为表格，那将是一种矫枉过正。

你可以很容易地用普通的 javascript 来做。

我们可以使用 javascript 创建表格的每个单元格，并动态地将其附加到表格中。

function showInfo() {
    var table = document.getElementById('info');
    
    info.forEach(function(obj) {
        var row = document.createElement('tr'),
            col1 = document.createElement('td'),
            col2 = document.createElement('td'),
            place = document.createTextNode(obj.place),
            username = document.createTextNode(obj.username);
        col1.appendChild(place);
        col2.appendChild(username);
        row.appendChild(col1);
        row.appendChild(col2);
        table.appendChild(row);
    });
    document.body.appendChild(table);
}

这里是示例fiddle

更新

似乎 IE 不支持 forEach。这是另一个使用 for 循环而不是 forEach 构造的版本

function showInfo() {
    var table = document.getElementById('info');
    for (var i=0; i< info.length; i++) {
        var obj = info[i],
            row = document.createElement('tr'),
            col1 = document.createElement('td'),
            col2 = document.createElement('td'),
            place = document.createTextNode(obj.place),
            username = document.createTextNode(obj.username);
        col1.appendChild(place);
        col2.appendChild(username);
        row.appendChild(col1);
        row.appendChild(col2);
        table.appendChild(row);
    }
    document.body.appendChild(table);
}

这是更新后的示例fiddle

【讨论】：

我没有要检查的 IE 10。但由于这是普通的 javascript，这应该可以工作。开发者控制台有错误吗？
您是说要向info var 添加更多对象吗？如果是这样，是的，这将工作......
啊！ IE 似乎不支持 forEach。我们可以用 for 循环替换它。我会更新答案
如果此解决方案有助于解决问题，请考虑将其标记为解决方案，以便其他搜索此问题的人能够快速查看解决方案。
知道expose 和JSON 的含义吗？ @Anbarasan

【解决方案2】：

您可以使用脚本标签导入数据：

<script src="data.json"></script>

然后用angularjs显示数据：

<script>
    angular.module('mainApp', [])
      .controller('mainCtl', function($scope) {
        $scope.info = info;
    });
</script>  


<div ng-app="mainApp" ng-controller="mainCtl"> 
    <table border="1" width="300">
        <tr><td>Place</td><td>Username</td></tr>
        <tr ng-repeat="n in info">
            <td>{{n.place}}</td>
            <td>{{n.username}}</td>
        </tr>
    </table>       
</div>

http://jsfiddle.net/hdbu1ffs/

【讨论】：

我了解您的解决方案。我尝试使用 chrome 运行它，但我并没有完全得到小提琴向我展示的输出。我得到类似的东西：|地点 |用户名 | | {{n.place}} | {{n.username}} |我会向您展示屏幕截图，但我不能在这里发布一个.. @Mathew。关于为什么会发生这种情况的任何想法？
可能是因为缺少 angular.js 文件，尝试将脚本添加到页面顶部。 jsfiddle.net/s9js7ehf

【解决方案3】：

以下是使用 Angular 和 here is a working plunker of the code below 实现此目的的方法：

data.json

[
  {
    "place": "Turkey",
    "username": "jhon"
  },
  {
    "place": "Dubai",
    "username": "bruce"
  },
  {
    "place": "Italy",
    "username": "Wayne"
  }
]

控制器

app.controller('MainCtrl', function($scope, $http) {
  $scope.info = null;
  $http.get("data.json").success(function (data) {
    $scope.info = data;
  });
});

查看

<body ng-controller="MainCtrl">
    <table>
      <tr>
        <th>Place</th>
        <th>Username</th>
      </tr>
      <tr ng-repeat="thing in info">
        <td>{{thing.place}}</td>
        <td>{{thing.username}}</td>
      </tr>
    </table>
  </body>

【讨论】：

【解决方案4】：

你可以使用 angularjs 轻松解决：

在 data.json 中：

 [
        {
            "place": "Turkey",
            "username": "jhon"
        },
        {
            "place": "Dubai",
            "username": "bruce"
        }, 
        {
            "place": "Italy",
            "username": "Wayne"
        }
    ]

控制器：

angular.module('app', []).controller('SolutionController', ['$scope', '$http',
    function($scope, $http) {
        $http.get("data.json").then(function(infos) {
            $scope.infos = infos;
        }, function(error) {
            $scope.infos = null;
        });
    }
]);

并查看：

<body ng-controller="SolutionController">
    <table>
        <tr>
            <th>Place</th>
            <th>User Name</th>
        </tr>
        <tr data-ng-repeat="info in infos">
            <td data-ng-bind="info.place"></td>
            <td data-ng-bind="info.username"></td>
        </tr>
    </table>
</body>

【讨论】：