Accessing complex json data in angularjs - html

Question

I am trying to display json data in html form using ng-repeat, I was able to grab data but some I could not due to objects in objects structure. Ex : "Obj => Obj => Obj" of a kind.
In the json object below, I have accessed the objs in the "Color" but where I need help is to access the objs in the "seat" and "engine"!. I think whatever ng-repeat that grabs "seat" objs would likely do the same for the "engine".
I did like this: ng-repeat = "c in datasource" first step. Next in a td, I did ng-repeat =" allcolor in c.Color" to get data of that "Color".
Now in another td, I want to grab the data of objs in "seat", how do I go about it?
Ex: ng-repeat = "seatobjs in allcolor.seat" not working.
<tr ng-repeat = "c in datasource">
<td>{{c.Name}}</td>
<td>{{c.From}}</td>
<td ><p ng-repeat="allcolor in c.Color>
{{allcolor.Name}}</p></td>
<td><p ng-repeat="seatobjs in allcolor.seat"> //need help here
{{seatobjs.Name}}</p></td>
<td><button type="button" ng-disabled="!(check)">Edit</button></td>
</tr>
Thank
[
{
"Name": "Car",
"From": "2019-06-26",
"Tom": "2019-12-31",
"Color": [
{
"Name": "Green",
"From": "2019-06-26",
"Tom": "2019-12-31",
"seat": [
{
"Name": "Yello",
"From": "2019-06-26",
"Tom": "2019-12-31"
},
{
"Name": "Green",
"From": "2019-06-26",
"Tom": "2019-12-31"
}
],
"engine": [
{
"Name": "Brown",
"From": "2019-06-26",
"Tom": "2019-12-31"
}
]
}
]
},
{
"Name": "Car",
"From": "2019-06-26",
"Tom": "2019-12-31",
"Color": [
{
"Name": "Red",
"From": "2019-06-26",
"Tom": "2019-12-31",
"tyre": [
{
"Name": "Yello",
"From": "2019-06-26",
"Tom": "2019-12-31"
},
{
"Name": "Green",
"From": "2019-06-26",
"Tom": "2019-12-31"
}
],
"engine": [
{
"Name": "Black",
"From": "2019-06-26",
"Tom": "2019-12-31"
}
]
}
]
},
]

Answer 1

Try this
ng-repeat = "seatobjs in allcolor['seat']"

Answer 2

allcolor cannot be accessed by elements that are outside of the ng-repeat defined element.
With your given HTML markup, you might want to use ng-repeat again on the new td and access seat as follows.
<tr ng-repeat = "c in datasource">
<td>{{c.Name}}</td>
<td>{{c.From}}</td>
<td ><p ng-repeat="allcolor in c.Color>
{{allcolor.Name}}</p>
</td>
<td ng-repeat =" allcolor2 in c.Color">
<p ng-repeat="seatobjs in allcolor2.seat">{{seatobjs.Name}}</p>
</td>
<td><button type="button" ng-disabled="!(check)">Edit</button></td>
</tr>

Answer 3

With the ngRepeat directive you can iterate over the properties of an object. This is the syntax:
<div ng-repeat="(key, value) in myObj">…</div>
The following code iterates some properties of your JSON and binds them inside a table:
var carApp = angular.module('carApp', []);
carApp.controller('CarController', function CarController($scope) {
$scope.cars = [{
"Name": "Car",
"From": "2019-06-26",
"Tom": "2019-12-31",
"Color": [{
"Name": "Green",
"From": "2019-06-26",
"Tom": "2019-12-31",
"seat": [{
"Name": "Yello",
"From": "2019-06-26",
"Tom": "2019-12-31"
},
{
"Name": "Green",
"From": "2019-06-26",
"Tom": "2019-12-31"
}
],
"engine": [{
"Name": "Brown",
"From": "2019-06-26",
"Tom": "2019-12-31"
}]
}]
},
{
"Name": "Car",
"From": "2019-06-26",
"Tom": "2019-12-31",
"Color": [{
"Name": "Red",
"From": "2019-06-26",
"Tom": "2019-12-31",
"tyre": [{
"Name": "Yello",
"From": "2019-06-26",
"Tom": "2019-12-31"
},
{
"Name": "Green",
"From": "2019-06-26",
"Tom": "2019-12-31"
}
],
"engine": [{
"Name": "Black",
"From": "2019-06-26",
"Tom": "2019-12-31"
}]
}]
},
];
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="carApp">
<div ng-controller="CarController">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Seat</th>
<th>Tyre</th>
<th>Engine</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars">
<td>{{car.Name}}</td>
<td>
<span>{{car.Color[0].Name}}</span>
</td>
<td>
<ul>
<li ng-repeat="seat in car.Color[0].seat">{{seat.Name}}</li>
</ul>
</td>
<td>
<ul>
<li ng-repeat="tyre in car.Color[0].tyre">{{tyre.Name}}</li>
</ul>
</td>
<td>{{car.Color[0].engine[0].Name}}</td>
</tr>
</tbody>
</table>
</div>
</div>