如何使用 Angular js 将数据从 json 转换为对象列表答案

【问题标题】：How do i convert data from json to list of objects using angular js如何使用 Angular js 将数据从 json 转换为对象列表
【发布时间】：2017-03-06 12:57:32
【问题描述】：

我是 Angular js 的新手。我有一个 json 响应，我想将其转换为对象列表并使用 ng-repeat 来显示这些对象。我得到了这些对象的列表，如下所示

    1 : 
{"_id":"56e75b42c9cbbb7765414cdf",
"email":"email@email.com",
"phone":"02-653-2900",
"display_name":"KFC",
"registered_name":"KFC",
"__v":0,
"address":
    {"country":"TH",
       "state":"TH14,
       "postcode":"10150",
       "suburb":"Klongteay",
       "address2":"Sukhumvit Rd",
       "address1":"142 Two Pacific Place"},
"date_modified":"2016-03-15T00:45:54.631Z",
"date_created":"2016-03-15T00:45:54.626Z",
"status":"active",
"logo":{"path_to_file":"90cf845d95.png"}
}

我已将上述对象保存在 $scope.results 中，我想做类似的事情

<div ng-repeat="user in  results.data  ">
           <span>Phone </span><span>{{user.phone}}:</span> 
            <span>Display Name</span><span>{{user.display_name}}:</span> 
</div>

我怎样才能做到这一点？

【问题讨论】：

除了AngularJS，你可以使用一个简单的JSON.parse。见stackoverflow.com/questions/4935632/parse-json-in-javascript 和msdn.microsoft.com/library/cc836466(v=vs.94).aspx
请注意，您在状态值 "address": {"country":"TH", "state":"TH14", 的最后一行错过了双引号，除了它应该按原样工作。
也发布你的js代码，你在get、.then或.success中使用的是哪一个？

标签： javascript angularjs json parsing angularjs-scope

【解决方案1】：

创建一个新的控制器

angular.module('appname').controller('ctrl', function($scope, $http){
 $http.get('url-to-json').then(function(res){
  $scope.results = res;
 });
})

【讨论】：

【解决方案2】：

您的ng-repeat 没有问题，但 JSON 无效。 "state":"TH14, 中缺少一个小的双引号

这是工作的 plunker http://plnkr.co/edit/Z4n9oSIznVnFsNTOcLJX?p=preview

应该是

    1 : 
{"_id":"56e75b42c9cbbb7765414cdf",
"email":"email@email.com",
"phone":"02-653-2900",
"display_name":"KFC",
"registered_name":"KFC",
"__v":0,
"address":
    {"country":"TH",
       "state":"TH14",
       "postcode":"10150",
       "suburb":"Klongteay",
       "address2":"Sukhumvit Rd",
       "address1":"142 Two Pacific Place"},
"date_modified":"2016-03-15T00:45:54.631Z",
"date_created":"2016-03-15T00:45:54.626Z",
"status":"active",
"logo":{"path_to_file":"90cf845d95.png"}
}

【讨论】：