CODEWITHSUNDEEP
jqueryangularjs
Jane2
Jane2

Reputation: 67

Unable to show data in ng-repeat in angular

I have data like this :

enter image description here

And here is angular html:

<tr ng-repeat="item in orders">
            <td>{{item.name}}</td>
            <td>{{item.city}}</td>
        </tr>

I don't know why it cannot show data and there is no error after i debugged.

Please help me.Thanks

Upvotes: 0

Views: 53

Answers (2)

willoller
willoller

Reputation: 7330

You are expecting your data to look like this:

$scope.orders = [ { item }, { item } ];

But it's really more like this:

$scope.orders = [ [ { item } ], [ { item } ] ]

Notice there is an extra Array surrounding each order.

There are basically 3 ways to address this

1. You can fix this in the Template

You just need to access inside the Array in your template. You can change

<tr ng-repeat="item in orders">
    <td>{{item.name}}</td>
    <td>{{item.city}}</td>
</tr>

to

<tr ng-repeat="item in orders">
    <td>{{item[0].name}}</td>
    <td>{{item[0].city}}</td>
</tr>

2. You can fix this in the Controller

By updating your data after you retrieve/create it in your controller, you can get your data into the right shape, by removing the array from each item.

$scope.orders = myOrders.map(function(item){
  return item[0];
});

3. You can fix this in your Data Source

I don't know what your API or data source is, but if you can control that, you can update it so it sends the data to your Angular app in the shape you want.

Upvotes: 5

charlietfl
charlietfl

Reputation: 171669

Since you have an extra nested array wrapping each object you either need to fix the source or map the data to remove the extra arrays

$scope.orders = data.map(function(arr){
     return arr[0];
})

Upvotes: 2

Related Questions