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

Question

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

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

我可以使用循环访问这些内容并在警报框的帮助下进行检查。但是，我希望以表格的形式显示内容。我可以使用 JavaScript 或者正如有人向我建议的那样，我也可以使用 Angular.js。有什么想法可以让我相处起来更容易吗？

Answer 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