I want to display a nested JSON object in the next row of the grid. I am using Ember and mdc-layout-grid.
My JSON data is as follows:
data = [{
"amzOrderId": "403-8957866-2673902",
"financialEventType": "SHIPMENT",
"timestamp": 1570025882722,
"numOfItems": 1,
"nested": [{
"amzOrderId": "405-3430902-0842748",
"financialEventType": "SHIPMENT",
"timestamp": 1570025882722,
"numOfItems": 1}]},
{
"amzOrderId": "171-9021455-7043516",
"financialEventType": "SHIPMENT",
"timestamp": 15700258888722,
"numOfItems": 1,
"nested":null,
}]
My hbs file to render:
<li class="sales-list-row">
{{#mdc-layout-grid as |grid|}}
{{#grid.inner as |inner|}}
{{#inner.cell class="bought" span=2}}
<h3 class="bought__value">{{get data "numOfItems"}}</h3>
{{/inner.cell}}
{{#inner.cell class="purchased" span=2}}
<span class="purchased__text">Purchased</span>
<h3 class="purchased__value">{{format-date (get data "timestamp") "date"}}</h3>
{{/inner.cell}}
{{#inner.cell class="id" span=2}}
<h4 class="id__value">{{get data "amzOrderId"}}</h4>
{{/inner.cell}}
{{/grid.inner}}
{{/mdc-layout-grid}}
</li>
Now I want to render "nested" object values just in the next row if it is present (move to next data[element] in case nested is null). How do I approach this problem? I have tried a few methods but they are not working.
I hope the answer helps anyone. It was easy I added this loop at end of above HBS file:
{{#if data.nested}}
{{#each data.nested as |row|}}
{{nested-row data1=row}}
{{/each}}
{{/if}}
and the component nested-row.hbs will have the same code like the above HBS file but we need to use get data1. Hope it helps!!