How to get nested JSON data by using ng repeat in angularjs

Question

I'm trying to getting items._id value in ng view by using ng-repeat. occurring all data but i want specific data.

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 } ]

Controller

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

    $scope.userInfo = response.data
  })
})

ng view

<body ng-app="myApp">

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

</ul>

The data you show is not valid JSON. Keys in JSON have to be surrounded by `"`. — t.niese, Aug 07 '17 at 06:36
Possible duplicate of [How to use ng-repeat for dictionaries in AngularJs?](https://stackoverflow.com/questions/11985863/how-to-use-ng-repeat-for-dictionaries-in-angularjs) — Vivz, Aug 07 '17 at 06:38
check out this http://plnkr.co/edit/6jTrwMKdLDcH5T3ZFiS7?p=preview — Noman Kt, Aug 07 '17 at 13:21

score 1 · Answer 1 · answered Aug 07 '17 at 07:06

1

Here you are using nested json object ie items in userInfo, you can write ng-repeat as,

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

Note: It will be good to understand if you use ng-repeat in <li></li> instead of <ul></ul>

answered Aug 07 '17 at 07:06

Sachin Dongre

25
4

Just a minor problem, `userInfo` is an array of object and not object. – Rajesh Aug 07 '17 at 07:32
Yes I'm agree with you, but its single element in array so we can use like userInfo[0] – Sachin Dongre Aug 07 '17 at 07:34
Or its just a sample input and actual data consist of *n* objects. – Rajesh Aug 07 '17 at 07:45
`
- {{x._id}}
` It's not working, if i remove .items then it's giving me specific output, but not giving me items result
– Noman Kt Aug 07 '17 at 07:48
Try this,
- {{item._id}}
– Sachin Dongre Aug 07 '17 at 08:32

C.C.Liew · Answer 2 · 2017-08-07T07:29:47.247

0

Try this,

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

and you could get your repeated "_id" in the items now in ng-repeat="item in userInfo.items" and with {{item._id}} .

Please correct me if there's any mistake, I'm still new. Thanks.

edited Aug 07 '17 at 07:29

answered Aug 07 '17 at 06:44

C.C.Liew

28
6

How is this: `"items" : {"_id":"item2","_name":"My Item #4"}, {"_id":"item3","_name":"My Item #4"},` a valid JSON? – Rajesh Aug 07 '17 at 06:46
@Rajesh you're right, I overlooked it. Thanks for correcting me. – C.C.Liew Aug 07 '17 at 06:54
When you change something in your answer, please check if rest of it actually is in sync with update. Pointing to *this is not a nested JSON.* – Rajesh Aug 07 '17 at 07:17
@NomanKt Like I mentioned earlier, it was your JSON format, check this out http://plnkr.co/edit/eb1LCy0YqPDFlwXLci4c?p=preview , I just changed your JSON. – C.C.Liew Aug 07 '17 at 15:51

kuk_94 · Answer 3 · 2017-08-07T07:12:43.153

0

Try using nested ng-repeat like this:

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

I'm assuming your http call will return a valid response because the Json data you've given is invalid. The keys need to be in enclosed within " ". I've also structured the the ng-repeat assuming that your response will have multiple objects

edited Aug 07 '17 at 07:12

answered Aug 07 '17 at 06:56

kuk_94

483
1
5
18

there is nothing appearing – Noman Kt Aug 07 '17 at 07:39

Bayan Abuawad · Answer 4 · 2017-08-08T13:22:23.893

0

This is worked for me:

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

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

edited Aug 08 '17 at 13:22

answered Aug 07 '17 at 10:07

Bayan Abuawad

94
11

Something wrong with your JSON Data, coz as you can see in my Plunker example I have used the same object as yours and it worked. – Bayan Abuawad Aug 07 '17 at 10:25
have you found solution? – Noman Kt Aug 07 '17 at 13:09

score 0 · Answer 5 · answered Aug 07 '17 at 17:52

0

I was trying to retrieve string as an object that was a mistake. I used object data instead of string and got result.

answered Aug 07 '17 at 17:52

Noman Kt

21
8

How to get nested JSON data by using ng repeat in angularjs

5 Answers5