拆分 json 并使用 ng-repeat angular 指令显示它

Question

如何查看拆分 json 字符串的 Key: value 列表？

function MyCtrl($scope) {

    var jsonString='{"prop":"1, 2, 3, 4, 5, 6", "prop": "lol, asd, lidfj", "prop": "asd, test!!!"}';
    $scope.evalled=$scope.$eval(jsonString);
    
    $scope.fromJsoned=angular.fromJson(jsonString);
    
  $scope.ljson = JSON.parse(jsonString);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MyCtrl">     
        <p>JSON.parse:</p>
        <ul>
        <li ng-repeat="son in ljson">Key: {{son.key }}, Value: {{son}}</li>
        </ul>
    </div>
</div>

在这个例子中，目标是显示：

 - Key: prop, Value: 1, 2, 3, 4, 5, 6
 - Key: prop, Value: lol, asd, lidfj
 - Key: prop, Value: asd, test!!!

Answer 1

您的 json 字符串不是数组，ng-repeat 需要重复它。

你想要这个：

var jsonString='[{"prop":"1, 2, 3, 4, 5, 6"}, {"prop": "lol, asd, lidfj"}, {"prop": "asd, test!!!"}]';

Answer 2

脚本：

var obj = JSON.parse(jsonString);

var result = []
for (var key in obj){
    result.push({key:key, value: obj[key]});
}

$scope.ljson = result;

html:

<li ng-repeat="son in ljson">Key: {{son.key }}, Value: {{son.value}}</li>

虽然不确定它能否很好地处理多个 "prop"

Answer 3

您可以使用 ng-repeat="(key, value) in data"。那么你的代码就变成了

<li ng-repeat="(key, value) in ljson">Key: {{key }}, Value: {{value}}</li>

拆分 json 并使用 ng-repeat angular 指令显示它

Split a json and show it with ng-repeat angular directive

javascript

parsing

json

angularjs

ng-repeat