Question

我在文件JSON中有一个data.json数组，其格式为：

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

我可以使用循环访问这些并在警告框的帮助下进行检查。但是，我希望以表格的形式显示内容。我可以使用JavaScript或者有人向我建议我也可以使用Angular.js。任何关于我可以相处的方式的想法会更容易吗？

Answer 1

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

<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/

Answer 2

以下是使用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>

Answer 3

如果你想使用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

更新

似乎forEach不支持IE。这是另一个使用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

Answer 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>

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

4 个答案:

更新