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

【问题标题】：How to get nested JSON data by using ng repeat in angularjs如何在angularjs中使用ng repeat获取嵌套的JSON数据
【发布时间】：2018-01-14 09:22:59
【问题描述】：

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

数据.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>

【问题讨论】：

ng-repeat="item in x.items" 将返回每个项目
你必须使用嵌套的ng-repeat。
您显示的数据不是有效的 JSON。 JSON 中的键必须用" 包围。
How to use ng-repeat for dictionaries in AngularJs?的可能重复
看看这个plnkr.co/edit/6jTrwMKdLDcH5T3ZFiS7?p=preview

标签： javascript angularjs json

【解决方案1】：

试试这个，

   [{
    "_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="item in userInfo.items" 和 {{item._id}} 中的项目中获得重复的“_id”。

如果有任何错误请纠正我，我还是新手。谢谢。

【讨论】：

这是怎么回事："items" : {"_id":"item2","_name":"My Item #4"}, {"_id":"item3","_name":"My Item #4"}, 一个有效的 JSON？
@Rajesh 你是对的，我忽略了它。感谢您纠正我。
当您更改答案中的某些内容时，请检查其余部分是否与更新同步。指向 这不是嵌套的 JSON。
@NomanKt 就像我之前提到的，这是您的 JSON 格式，请查看 plnkr.co/edit/eb1LCy0YqPDFlwXLci4c?p=preview，我刚刚更改了您的 JSON。

【解决方案2】：

尝试像这样使用嵌套的 ng-repeat：

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

我假设您的 http 调用将返回有效响应，因为您提供的 Json 数据无效。密钥需要包含在“”中。我还构建了 ng-repeat 假设您的响应将有多个对象

【讨论】：

什么都没有出现

【解决方案3】：

这里你使用嵌套的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> 会很好理解

【讨论】：

只是一个小问题，userInfo 是一个对象数组，而不是对象。
是的，我同意你的看法，但它是数组中的单个元素，所以我们可以像 userInfo[0] 一样使用
或者它只是一个示例输入，实际数据由 n 个对象组成。
<ul> <li ng-repeat="x in userInfo.items">{{x._id}}</li> </ul> 它不起作用，如果我删除 .items 那么它会给我特定的输出，但没有给我项目结果
试试这个，
- {{item._id}}

【解决方案4】：

这对我有用：

<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

【讨论】：

您的 JSON 数据有问题，因为正如您在我的 Plunker 示例中看到的那样，我使用了与您相同的对象并且它有效。
你找到解决办法了吗？

【解决方案5】：

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

【讨论】：