How to ng-repeat array of an object in object?

Question

I have this data:

{
   "order":[
      {
         "id":1,
         "table":1,
         "foods":"{'foods':[{'id':2, 'name':'Nasi Minyak', 'qty':1}]}",
         "drinks":"{'drinks':[{'id':1,'name':'Teh O Ais','qty':1}]}",
         "waiter":"ali",
         "foods_status":0,
         "drinks_status":0,
         "created_at":"2015-07-12T00:30:52.637Z",
         "updated_at":"2015-07-12T00:30:52.637Z"
      },
      {
         "id":2,
         "table":2,
         "foods":"{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]}",
         "drinks":"{'drinks':[{'id':1,'name':'Milo Ais','qty':1}]}",
         "waiter":"abu",
         "foods_status":0,
         "drinks_status":0,
         "created_at":"2015-07-12T00:51:43.552Z",
         "updated_at":"2015-07-12T00:51:43.552Z"
      }
   ]
}

I try to grab all foods name inside table like this:

<table class="table-bordered table table-striped">
        <thead>
            <tr>
                <td>#</td>
                <td>Name</td>
                <td>Action</td>
            </tr>   
        </thead>
        <tbody>
            <tr ng-repeat="order in orders">
                <td>{{order.id}}</td>
                <td>{{order.foods.name}}</td>
                <td>
                    <button class="btn btn-danger" ng-click="">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>

And this is my $http.get to get the data:

$http.get("../api/orders")
 .success(function(data) {
  var order = data.order;
  $scope.orders = order;
 });

I managed to bind the id but I could't bind the name inside the foods array. How to get the name inside the foods array of this data?

Plunker: http://plnkr.co/edit/2oiOc06cZph4en8DJ18n

you need a second ng-repeat loop inside the order. ng-repeat="food in order.foods.foods" — Dinesh
– Dinesh, Commented Jul 12, 2015 at 1:26
why would you even return data like that from the server? fix the way the server serializes the data, don't try to monkey patch display a senseless data structure. — Claies
– Claies, Commented Jul 12, 2015 at 2:50

Renan Ferreira · Accepted Answer · 2015-07-12 11:18:59Z

1

You need another ng-reapeat. Something like this:

<tr ng-repeat="order in orders">
    <td>{{order.id}}</td>
    <td>
        <span ng-repeat="item in order.foods.foods">{{item.name}}/</span>
    </td>
    <td>
        <button class="btn btn-danger" ng-click="">Delete</button>
    </td>
</tr>

Another consideration is about the format of your JSON. this line:

"foods":"{'foods':[{'id':2, 'name':'Nasi Minyak', 'qty':1}]}"

the way it is, "foods" is holding a String, and not a Object. To make the ng-reapeat work, you will need to force JSON from string using

JSON.parse(jsonString);

or change your JSON to:

"foods":{"foods":[{"id":2, "name":"Nasi Minyak", "qty":1}]}

Side note, why repeat the keys "foods" and "drinks"? Doesn't seem logic to me. Change your data structure to:

"order":[
      {
         "id":1,
         "table":1,
         "foods":[{"id":1, "name":"Nasi Kerabu", "qty":1},{"id":2, "name":"Nasi Minyak", "qty":1}],
         "drinks":[{"id":1,"name":"Sirap Ais","qty":1},{"id":2, "name":"Milo Ais", "qty":1}],
         "waiter":"ali",
         "foods_status":0,
         "drinks_status":0,
         "created_at":"2015-07-12T00:30:52.637Z",
         "updated_at":"2015-07-12T03:30:35.684Z"
      },
      ...
      ]

and use:

<td>  <span ng-repeat="item in order.foods">{{item.name}}</span> </td>

Here is a plunker with these modifications: http://plnkr.co/edit/UVvCVzh4hbsEwolyWpDs?p=preview

edited Jul 12, 2015 at 11:18

answered Jul 12, 2015 at 1:32

Renan Ferreira

2,1603 gold badges21 silver badges31 bronze badges

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

4 Comments

Zulhilmi Zainudin Over a year ago

Need your help. I just created a Plunker: plnkr.co/edit/2oiOc06cZph4en8DJ18n

Zulhilmi Zainudin Over a year ago

Renan: I change my JSON data and updated the Plunker - plnkr.co/edit/8WawGrpVO6hzbkUrVZQ8 Still don't have idea how to get the foods name.

user3941146 Over a year ago

Here is a plunker that works plnkr.co/edit/snE9Em0tCKh0nUHIlTFn?p=preview. Consider modifying your JSON file. Use double quotation marks instead of single quotation marks. In your modified JSON file in your new plunker remove double quotations marks here

Renan Ferreira Over a year ago

You didn't do what I said. If a key in your JSON is going to store an array or an object, you must not use double quotations on the value! Another thing, if you are going to remove the double key "foods", you have to change the ng-repeat. I edited my answer to help you more

user3941146 · Accepted Answer · 2015-07-12 04:13:07Z

0

Here is a plunker that works http://plnkr.co/edit/snE9Em0tCKh0nUHIlTFn?p=preview. Consider modifying your JSON file. Use double quotation marks instead of single quotation marks.

In your modified JSON file in your new plunker remove double quotations marks here "[{'id':1,

answered Jul 12, 2015 at 4:13

user3941146

Comments

chiragchavda.ks · Accepted Answer · 2015-07-12 05:25:27Z

0

I have made some changes in your data and it fix the issue you are facing.

Here is plunker link

`http://plnkr.co/edit/nxBGMMyuNIzUOvQAu7YY?p=preview`

answered Jul 12, 2015 at 5:25

chiragchavda.ks

5307 silver badges25 bronze badges

Comments

amyspark · Accepted Answer · 2015-07-12 15:45:28Z

0

Each order would be an object like this:

  {
     "id":2,
     "table":2,
     "foods":"{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]}",
     "drinks":"{'drinks':[{'id':1,'name':'Milo Ais','qty':1}]}",
     "waiter":"abu",
     "foods_status":0,
     "drinks_status":0,
     "created_at":"2015-07-12T00:51:43.552Z",
     "updated_at":"2015-07-12T00:51:43.552Z"
  }

Note that foods points to an object, whose only key 'foods' points to an array... whose first component should be an object. However, if you read more closely:

"foods":"{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]}",

Notice the double quotes surrounding foods's value? They mean that it points to a String instead of an object.

First, you need to delete the double quotes surrounding the values of both foods and drinks:

"foods":{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]},
"drinks":{'drinks':[{'id':1,'name':'Milo Ais','qty':1}]},

And then replace all the single quotes with double ones, to make the object comply with the JSON object definition:

"foods":{"foods":[{"id":2, "name":"Nasi Goreng", "qty":1}]},
"drinks":{"drinks":[{"id":1,"name":"Milo Ais","qty":1}]},

Now, to get 'name', you need to access order.foods.foods[0].name instead of order.foods.name.

edited Jul 12, 2015 at 15:45

answered Jul 12, 2015 at 1:33

amyspark

5201 gold badge4 silver badges18 bronze badges

1 Comment

Zulhilmi Zainudin Over a year ago

Still couldn't get it. I just created a Plunker. Hope you can help: plnkr.co/edit/2oiOc06cZph4en8DJ18n

Collectives™ on Stack Overflow

How to ng-repeat array of an object in object?

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related