title: How to loop through the nested JSON data in React?
body: <p>I am trying to map through nested JSON Data in React. The data looks like this</p>
  <pre><code>const employees = [
    {
      data: [
        {
          stuff: [
            {
              onetype: [
                { id: 1, name: &quot;John Doe&quot; },
                { id: 2, name: &quot;Jane Doe&quot; }
              ]
            },
            { othertype: [{ id: 2, company: &quot;IKEA&quot; }] }
          ]
        },
        {
          otherstuff: [
            {
              thing: [
                [1, 42],
                [2, 2]
              ]
            }
          ]
        }
      ]
    }
  ];
  </code></pre>
  <p>I want to map each oneType name. Right now I am trying to do with map function but not sure whether I can do this or not. I have tried <strong>Object.keys</strong>, <strong>Object.entries</strong> but it didn't help and also tried <strong><code>{oneType.name}</code></strong> that doesn't work either. I am not sure how to reach the inner index of oneType.</p>
  <p>Does anybody have any idea? Am I doing something wrong here or should I map the whole array of objects in a totally different way?</p>
  <p><strong>Update</strong>: I want to show listedItems of oneType.name on UI page</p>
  <ul>
  <li>John Doe</li>
  <li>Jane Doe</li>
  </ul>
  <p>The render method looks like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App() {
    const employees = [
      {
        data: [
          {
            stuff: [
              {
                onetype: [
                  { id: 1, name: "John Doe" },
                  { id: 2, name: "Jane Doe" }
                ]
              },
              { othertype: [{ id: 2, company: "IKEA" }] }
            ]
          },
          {
            otherstuff: [
              {
                thing: [
                  [1, 42],
                  [2, 2]
                ]
              }
            ]
          }
        ]
      }
    ];
  
    return (
      &lt;div className="App"&gt;
        {employees &amp;&amp; employees.data &amp;&amp; employees.data.length &gt; 0
          ? employees.data.map((item) =&gt; (
              &lt;div&gt;
                {employees.data[item].stuff.map((datum) =&gt; (
                  &lt;div&gt;
                    {employees.data[item].stuff[datum].map((type) =&gt; (
                      &lt;div&gt;
                        {employees.data[item].stuff[datum].onetype[type].map(
                          (other) =&gt; (
                            &lt;h1&gt;{other.name}&lt;/h1&gt;
                          )
                        )}
                      &lt;/div&gt;
                    ))}
                  &lt;/div&gt;
                ))}
              &lt;/div&gt;
            ))
          : null}
      &lt;/div&gt;
    );
  }
  ReactDOM.render(&lt;App /&gt;, document.body);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>