У меня есть строка 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.
Как я мог это достичь?
Вы можете использовать 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>
Вы можете извлечь ключи строки, которую вы получаете:
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-массив, который легко перебирать с угловым