Question

因此，我尝试使用ng-repeat在HTML表中打印简单JSON对象的键和值，但无法在html页面上打印。 JSON对象已从后端接收，并正在尝试在前端填充它。我知道我在某个地方犯了一个愚蠢的错误，但不知道在哪里。

JSON对象

json_data ={
    user1 : "matt",
    user2 : "kim",
    user3 : "Tim"
}

$scope.rows = json_data;

HTML代码 ..

   <table ng-if="displayTable">
        <caption>Results</caption>
        <tr>
            <th>Username</th>
            <th>Name</th>
        </tr>
            <tr ng-repeat="(key, value) in rows">
                <td> {{key}} </td> <td> {{ value }} </td>
            </tr>
        </tr>
    </table>

不明白我在这里犯了什么愚蠢的错误。

Answer 1

尝试{{rows.key}}和{{rows.value}}。虽然我不认为这是答案。试试看。

或者，您可以尝试查看它是否仅适用于key或value之一。

Answer 2

首先，（键，值）用（索引，值）更好地表示。这段代码的正确版本将输出以下内容：

0 {“ user1”：“ matt”，“ user2”：“ kim”，“ user3”：“ Tim”}

其中0是数组的第一个索引，而json是整个值。因此，我想您正在使用一种不好的方法。尝试将数组修改为类似的内容：

$scope.rows = [
   {key: 'user1', user: 'matt'},
   {key: 'user1', user: 'kim'},
   {key: 'user1', user: 'Tim'},
];

并将HTML修改为：

<table ng-if="displayTable">
    <caption>Results</caption>
    <tr>
        <th>Username</th>
        <th>Name</th>
    </tr>
        <tr ng-repeat="row in rows">
            <td> {{row.key}} </td> <td> {{ row.user }} </td>
        </tr>
    </tr>
</table>

JSON对象的ng-repeat问题

2 个答案: