How to display nested JSON object in the next row of mdc-layout-grid in Ember?

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">
  
    
      
        <h3 class="bought__value"></h3>
      
      
        <span class="purchased__text">Purchased</span>
        <h3 class="purchased__value"></h3>
      
      
        <h4 class="id__value"></h4>
              
    
  
</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.