проблема повторения ng с JSON Object

Question

Поэтому я пытаюсь напечатать ключи и значения простого объекта JSON внутри таблицы HTML с помощью ng-repeat, но не могу напечатать его на html-странице.Объект JSON получен из серверной части, и я пытаюсь заполнить его во внешнем интерфейсе.Я понимаю, что где-то делаю глупую ошибку, но не могу понять, где.

JSON Object

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

$scope.rows = json_data;

HTML code ..

   <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

Во-первых, (ключ, значение) более хорошо представлен (индекс, значение).Правильная версия этого фрагмента кода выведет следующее:

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>

Answer 2

Попробуйте {{rows.key}} и {{rows.value}}.Хотя я не думаю, что это ответ.Попробуйте ...

В качестве альтернативы вы можете попробовать проверить, работает ли он только с одним ключом или значением ...