CODEWITHSUNDEEP
javascriptangularjsjson
CrudeCoder
CrudeCoder

Reputation: 401

nested array with ng-repeat table

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.

Upvotes: 0

Views: 4005

Answers (4)

codeninja.sj
codeninja.sj

Reputation: 4109

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

Upvotes: 0

Santhy K
Santhy K

Reputation: 839

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>

Upvotes: 1

alexdmejias
alexdmejias

Reputation: 1419

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>

Upvotes: 1

user5621153
user5621153

Reputation: 

<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

Upvotes: 2

Related Questions