Display nested loops object in html list ul li

Question

Hi I have this object

{
 levela: {
  levelb: {
    levelc: [],
    leveld: []
  }
 }, 
 level1: {
   level2: {
     level3: {
       level4:[]
     }
   }
 }
}

I want convert this in ul li items like this, I just want to stop if I object[key] is an array

<ul>
 <li>levela
  <ul>
   <li>levelb
      <ul>
         <li>levelc</li>
      </ul>
   </li>

  </ul>
 </li>
 <li>level1</li>
  ....
</ul>

Thanks

Answer 1

Time to use generator function !

Hope you don't render that component often...

 const { useState, useEffect } = React; const App = () => { const [data, setData] = useState({ levela: { levelb: { levelc: [], leveld: [] } }, level1: { level2: { level3: { level4: [] } } } }) const renderData = (data) => { let id = 1; function* renderRecurse(data) { if (Array.isArray(data)) { for (let item of data) { yield (<li key={id++}>{item}</li>) } return; } for (let [key, value] of Object.entries(data)) { yield (<ul key={id++}><li key={id++}>{key}</li>{[...renderRecurse(value)]}</ul>) } } return [...renderRecurse(data)] } return <div>{renderData(data)}</div> } ReactDOM.render(<App />, document.getElementById('root') );

 <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <div id="root"></div>