如何使用angularjs迭代JSON字符串

Question

我有一個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個：年齡，id，名字。在另一個例子中，我有兩列：id，name。

我怎麼能做到這一點？

Answer 1

可以提取字符串的，你得到的鑰匙：

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數組容易以角度迭代

Answer 2

您可以使用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>