nested array with ng-repeat table

Question

I have a simple json like this:

$scope.fruits = [
{
    "type": "fruit",
    "content": [
        {
            "name": "banana",
            "type": "edible"
        }
        {
            "name": "apple"
            "type": "edible"
        }
    ],
    "id": 1
},
{
    "type": "vegetable",
    "content": [
        {
            "name": "eggplant",
            "type": "edible"
        },
        {
            "name": "poison ivy",
            "type": "inedible"
        }
    ],
    "id": 2
}
]

I want my table to have this format:

<tr>
    <td> fruit </td>
    <td> 1 </td>
    <td> banana </td>
    <td> edible </td>
</tr>
<tr>
    <td> fruit </td>
    <td> 1 </td>
    <td> apple </td>
    <td> edible </td>
</tr>
<tr>
    <td> vegetable </td>
    <td> 2 </td>
    <td> eggplant </td>
    <td> edible </td>
</tr>
<tr>
    <td> vegetable </td>
    <td> 2 </td>
    <td> poison ivy </td>
    <td> inedible </td>
</tr>

However I can't seem to do this with ng-repeat because I can't nest loops, so something like this wont work:

<tr ng-repeat = "item in fruit in fruits">
    <td> {{fruit.type}} </td>
    <td> {{fruit.id}} </td>
    <td> {{item.name}} </td>
    <td> {{item.type}} </td>
</tr>

Should I somehow collapse my json so that there isn't nested arrays? or is there a way for angular to parse this? I've tried playing around with the filter functionality but with no avail. If someone could help me understand how I can achieve my intended results or point me in the right direction, I would very much appreciate it.

@AnikIslamAbhi hmm. im not sure what you are asking. Perhaps the answer is that I would not know how to nest the looks so that it looks like what I want. — CrudeCoder
– CrudeCoder, Commented Dec 30, 2015 at 5:14

user5621153 · Accepted Answer · 2015-12-30 05:45:09Z

2

<span ng-repeat="category in fruits">
    <tr ng-repeat = "fruit in category.content">
        <td> {{category.type}} </td>
        <td> {{category.id}} </td>
        <td> {{fruit.name}} </td>
        <td> {{fruit.type}} </td>
    </tr>
</span>

or

U need to reconstruct a new object from the current

answered Dec 30, 2015 at 5:45

user5621153

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

Comments

alexdmejias · Accepted Answer · 2015-12-30 06:13:48Z

1

If you don't want to nest ng-repeats, you could remap the object, something like this

var allFruitsTransformed = [];
fruits.forEach(function(fruit) {
  fruit.content.forEach(function(v) {
    allFruitsTransformed.push({
      itemType: fruit.type,
      id: fruit.id,
      name: v.name,
      type: v.type 
    });
  });
});

and then cycle through them in angular with something like this:

<tr ng-repeat = "fruit in allFruitsTransformed">
    <td> {{fruit.itemType}} </td>
    <td> {{fruit.id}} </td>
    <td> {{fruit.name}} </td>
    <td> {{fruit.type}} </td>
</tr>

answered Dec 30, 2015 at 6:13

alexdmejias

1,4494 gold badges20 silver badges34 bronze badges

1 Comment

CrudeCoder Over a year ago

this was the simplest solution. Since I am using datatables for angularjs, modifying the tbody tag or adding a span tag messed up the rendering of the table. reorganizing the json was the simpler solution, thus my accepted solution. Thank you @alexdmejias

Santhy K · Accepted Answer · 2015-12-30 06:14:34Z

1

Try this way. Hope this will work as you expected

<table border="1">
    <tbody ng-repeat="item in fruits">
        <tr ng-repeat="itemUnit in item.content">
            <td>{{item.type}}</td>
            <td>{{item.id}}</td>
            <td>{{itemUnit.name}}</td>
            <td>{{itemUnit.type}}</td>
        </tr>
    </tbody>
  </table>

answered Dec 30, 2015 at 6:14

Santhy K

8041 gold badge7 silver badges12 bronze badges

1 Comment

CrudeCoder Over a year ago

I thought this would work but it doesn't since I am using Angular Datatables modifying the <tbody> tag gives me an error

codeninja.sj · Accepted Answer · 2015-12-30 06:29:04Z

HTML Element

<my-table fruits="fruits"></my-table>

Custom Table Directive

app.directive('myTable', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var html = '<table>';
            angular.forEach(scope[attrs.fruits], function (fruit) {
                angular.forEach(fruit.content, function (content) {
                  html += '<tr><td>' + fruit.id + '</td>';
                  html += '<td>' + fruit.type + '</td>';
                  html += '<td>' + content.name + '</td>';
                  html += '<td>' + content.type + '</td></tr>';
                });
            });
            html += '</table>';
            element.replaceWith(html)
        }
    }
});

--SJ

Collectives™ on Stack Overflow

nested array with ng-repeat table

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related