如何在angularjs中使用ng repeat来获取嵌套的JSON数据



我正在尝试使用 ng-repeat items._id ng 视图中获取值。 发生所有数据,但我想要特定数据。

data.json

[ { _id        : "td6v9db4514cc4ewew4334",
firstName  : 'ayaz',
lastName   : 'memon',
items      : '[{"_id":"item2","_name":"My Item #4"},
{"_id":"item3","_name":"My Item #4"}]',
totalItems :  3,
totalPrice :  2999.97 } ]

控制器

app.controller('myCtrl', function($scope, $http) {
$http.get("data.json").then((response) => {
console.log(response.data)
$scope.userInfo = response.data
})
})

吴视图

<body ng-app="myApp">
<div ng-controller="myCtrl">
<ul ng-repeat="x in userInfo">
<li >{{x}}</li>
</ul>

在这里你使用嵌套的json对象,即userInfo中的项目,你可以写ng-repeat为,

<body ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="x in userInfo.items">{{x._id}}</li>
</ul>

注意:如果您在<li></li>中使用ng-repeat而不是<ul></ul>

尝试使用嵌套的ng-repeat,如下所示:

<ul ng-repeat="user in userInfo">
<li ng-repeat="x in user.items">{{x._id}} : {{x._name}}</li>
</ul>

我假设您的 http 调用将返回有效的响应,因为您提供的 Json 数据无效。密钥需要括在" "内。我还构建了 ng 重复,假设您的响应将有多个对象

试试这个,

[{
"_id": "td6v9db4514cc4ewew4334",
"firstName": "ayaz",
"lastName": "memon",
"items": [{
"_id": "item2",
"_name": "My Item #4"
},
{
"_id": "item3",
"_name": "My Item #4"
}
],
"totalItems": 3,
"totalPrice": 2999.97
}]

现在,您可以在 ng-repeat="user Info.items 中的项目"和 {{item._id}} 中获得重复的"_id"。

如果有任何错误,请纠正我,我仍然是新人。 谢谢。

我试图将字符串检索为一个错误的对象。我使用对象数据而不是字符串并得到了结果。

这对我有用:

<ul>
<li ng-repeat="user in userInfo">
<ul>
{{user._id}}
<li ng-repeat="item in user.items">
{{item._id}}
</li>
</ul>
</li>
</ul>

Plunker示例:http://plnkr.co/edit/hzWdj2IiUI2RytYVUI7m?p=preview

最新更新