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
– t.niese, Commented Aug 7, 2017 at 6:36
Possible duplicate of How to use ng-repeat for dictionaries in AngularJs? — Vivz
– Vivz, Commented Aug 7, 2017 at 6:38

Sachin Dongre · Accepted Answer · 2017-08-07 07:06:25Z

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 7, 2017 at 7:06

Sachin Dongre

254 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rajesh Dixit Over a year ago

Just a minor problem, userInfo is an array of object and not object.

Sachin Dongre Over a year ago

Yes I'm agree with you, but its single element in array so we can use like userInfo[0]

Rajesh Dixit Over a year ago

Or its just a sample input and actual data consist of n objects.

Noman Kt Over a year ago

<ul> <li ng-repeat="x in userInfo.items">{{x._id}}</li> </ul> It's not working, if i remove .items then it's giving me specific output, but not giving me items result

Sachin Dongre Over a year ago

Try this, <ul ng-repeat="x in userInfo"> <li ng-repeat="y in x" > <ul> <li ng-repeat="item in y.items">{{item._id}}</li> </ul> </li> </ul>

kuk_94 · Accepted Answer · 2017-08-07 07:12:43Z

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 7, 2017 at 7:12

answered Aug 7, 2017 at 6:56

kuk_94

5331 gold badge5 silver badges19 bronze badges

1 Comment

Noman Kt Over a year ago

there is nothing appearing

C.C.Liew · Accepted Answer · 2017-08-07 07:29:47Z

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 7, 2017 at 7:29

answered Aug 7, 2017 at 6:44

C.C.Liew

286 bronze badges

4 Comments

Rajesh Dixit Over a year ago

How is this: "items" : {"_id":"item2","_name":"My Item #4"}, {"_id":"item3","_name":"My Item #4"}, a valid JSON?

C.C.Liew Over a year ago

@Rajesh you're right, I overlooked it. Thanks for correcting me.

Rajesh Dixit Over a year ago

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.

C.C.Liew Over a year ago

@NomanKt Like I mentioned earlier, it was your JSON format, check this out plnkr.co/edit/eb1LCy0YqPDFlwXLci4c?p=preview , I just changed your JSON.

Noman Kt · Accepted Answer · 2017-08-07 17:52:08Z

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 7, 2017 at 17:52

Noman Kt

218 bronze badges

Comments

Bayan Abuawad · Accepted Answer · 2017-08-08 13:22:23Z

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 8, 2017 at 13:22

answered Aug 7, 2017 at 10:07

Bayan Abuawad

1441 silver badge12 bronze badges

2 Comments

Bayan Abuawad Over a year ago

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.

Noman Kt Over a year ago

have you found solution?

Collectives™ on Stack Overflow

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

5 Answers 5

5 Comments

1 Comment

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related