angular2 how to access a json child - json

Question

I would like to access a json child using Angular2, here is what I tried:
my json :
orderList=
{
"ref1": {
"Id": "57987"
"order": [
{
"amount": 4900,
"parent": "CIDPT8AO"
}
]
}
}
in the view:
<tr *ngFor="let order of orderList">
<td>{{order[0]}}</td> // NOT OKAY
</tr>
I would like to access "Id" and "parent", any idea?

Answer 1

First of all: you're missing a , after the "Id" line.
You're trying to access a JSON object like an array. Not sure if that works with Angular... If the error is not solved by adding the , I mentioned above, try declaring your orderList as an array.
If you're bound to this format you could do it like that:
orderListValues = Object.keys(orderList).map(function(_) { return j[_]; })
Then you should be able to access the values like that:
<tr *ngFor="let order of orderListValues">
<td>{{order.Id}}</td>
</tr>
Example:
orderList = {
"ref1": {
"Id": "57987",
"order": [
{
"amount": 4900,
"parent": "CIDPT8AO"
}
]
}
};
orderListValues = Object.keys(orderList).map(function(_) { return orderList[_]; });
console.log(orderListValues);

Answer 2

Your orderList is an object, you need
<tr *ngFor="let order of orderList.ref1.order">
<td>{{order}}</td>
</tr>

Answer 3

You can try this approach :
HTML
<table>
<tr *ngFor="let order of obj">
<td>{{order.Id}}</td>
</tr>
</table>
Component
var orderList=
{
"ref1": {
"Id": "57987",
"order": [
{
"amount": 4900,
"parent": "CIDPT8AO"
}
]
}
};
var obj = orderList[Object.keys(orderList)[0]];

Answer 4

NgForOf provides several exported values that can be aliased to local variables, for example:
index: number -> The index of the current item in the iterable.
first: boolean -> True when the item is the first item in the iterable.
<tr *ngFor="let ref of orderList">
<td>{{order.id}}</td>
<span *ngFor="let order of ref.order; let first = isFirst">
<td *ngIf="isFirst">{{order.parent}}</td>
</span>
</tr>
https://angular.io/api/common/NgForOf