Как я могу использовать Angularjs итерации строки JSON

Question

Как я могу использовать Angularjs итерации строки JSON

0

У меня есть строка json:

{"age":[459,918],"id":["bizno459","bizno459"],"name":["name459","wrongname459"]}

Теперь я хочу показать его с помощью угловых js следующим образом:

<table>
<tr>
  <th>column</th>
  <th>value1</th>
  <th>value2<th>
</tr>
<tr>
  <td>age</td>
  <td>459</td>
  <td>918</td>
</tr>
<tr>
  <td>id</td>
  <td>bizno459</td>
  <td>bizno459</td>
</tr>
</table>

Столбец динамический, в этом примере есть 3: age, id, name. В другом примере у меня есть два столбца: id, name.

Как я мог это достичь?

nekroe 29 июнь 2015, в 17:10

Источник

Теги:

angularjs

json

2 ответа

Ещё вопросы

Nicholas Thomson · Answer 1 · 2015-06-29T12-59-00.000Z

Вы можете использовать JSON.parse для преобразования строки JSON в объект. После этого вы можете использовать ng-repeat для итерации по клавишам, а затем по каждому значению для каждого ключа:

function TableCtrl($scope){
  var jsonString = '{"age":[459,918],"id":["bizno459","bizno459"],"name":["name459","wrongname459"]}';
  $scope.data = JSON.parse(jsonString);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
<table ng-controller='TableCtrl'>
<tr ng-repeat='(col, vals) in data'>
  <td>{{col}}</td>
  <td ng-repeat='val in vals track by $index'>{{val}}</td>
</tr>
</table>
  </div>

Большое спасибо, это работает для меня.

arterzatij · Answer 2 · 2015-06-29T13-35-00.000Z

Вы можете извлечь ключи строки, которую вы получаете:

var obj = JSON.parse('{"age":[459,918],"id":["bizno459","bizno459"],"name":["name459","wrongname459"]}');

и затем получить фактические ключи (возраст, идентификатор, имя):

var keys = Object.keys(obj);

и, наконец, итерации ключей, каждая клавиша - ваш первый столбец, и итерация массива ключа

elements = []
for ( key : keys )  // use js for
   element = [];

   element.push(key)
   for ( value : obj[key] )
       element.push(value)

   elements.push(element)

поэтому с этим у вас есть 2d-массив, который легко перебирать с угловым