title: Mapping multiple nested arrays in JSON
body: <p>I'm new to React, I am trying to map JSON-formatted text containing nested arrays in it like this:</p>
  
  <pre><code>{
    "shipments": [
  {
      "id": "S1000",
      "name": "T-shirts from Shanghai to Hamburg",
      "cargo": [
          {
              "type": "Fabric",
              "description": "1000 Blue T-shirts",
              "volume": "2"
          }, 
          {
              "type": "Fabric",
              "description": "2000 Green T-shirts",
              "volume": "3"
          }
      ],
      "mode": "sea",
      "type": "FCL",
      "destination": "Saarbrücker Str. 38, 10405 Berlin",
      "origin": "Shanghai Port",
      "services": [
          {
              "type": "customs"
          }
      ],
      "total": "1000",
      "status": "ACTIVE",
      "userId": "U1000"
  }, 
  {
      "id": "S1001",
      "name": "New spring collection",
      "cargo": [
          {
              "type": "Furniture",
              "description": "300 Tables",
              "volume": "20"
          }, 
          {
              "type": "Furniture",
              "description": "1500 Chairs",
              "volume": "15"
          }
      ],
      "mode": "sea",
      "type": "FCL",
      "destination": "Saarbrücker Str. 38, 10405 Berlin",
      "origin": "Ningbo port",
      "services": [
          {
              "type": "customs"
          }, 
          {
              "type": "insurance",
              "value": "100"
          }
      ],
      "total": "3000",
      "status": "ACTIVE",
      "userId": "U1002"
  },
  }
  </code></pre>
  
  <blockquote>
    <p>What I am trying to achieve is to map through this and show the details in a table. I have tried mapping this way:</p>
  </blockquote>
  
  <pre><code>         {
                  shipments.map((item, i) =&gt; (
                      (typeof(item) == 'array') ? 
                          item.map((subitem, i) =&gt; (
                              &lt;tr key={item.id}&gt;
                                  &lt;td&gt;{item.id}&lt;/td&gt;
                                  &lt;td&gt;{ item.cargo.type} &lt;/td&gt;
                                  &lt;td&gt;{ item.services.value} &lt;/td&gt;
                              &lt;/tr&gt;
                          )) 
                          :
                      null
                  ))
              }
  </code></pre>
  
  <p><b> another possible solution was something like this: </b></p>
  
  <pre><code>`shipments.map((item) =&gt; {
      console.log('first loop')
      Object.keys(item).filter(key=&gt;{
          let value = item[key];
          if(Array.isArray(value)){ 
              value.map(subitem=&gt;{
                  console.log(subitem.type)
              })
          }
   })
  })`
  </code></pre>
  
  <p>but I am not able to solve it. A reusable solution will be appreciated. Thanks in advance.</p>