Take a look at this straightforward json data:
$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 envision my table to be structured in the following way:
<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>
The challenge is that nesting loops using ng-repeat doesn't seem to work as intended. Here's an unsuccessful attempt:
<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>
Would it be better to flatten my json structure or is there a workaround with AngularJS to handle this? I've experimented with filters but haven't had success. Any guidance on achieving the desired outcome would be greatly appreciated.