Tengo algunos datos que quiero mostrar, pero me resulta difícil representarlos en una tabla porque el objeto tiene muchas capas. como puede ver, tiene elementos en algunos de los campos y otros no.
Data: { 'Current Assets': { name: 'Current Assets', value: 10000.62, items: [ { name: 'Bank', value: 1600.11, items: [ { name: 'hello', value: -65.43, }, { name: 'Business Bank Account', value: 1760.54, }, ], }, { name: 'Accounts Receivable', value: 9222.51, }, ], }, 'Fixed Assets': { name: 'Fixed Assets', value: 4600.28, items: [ { name: 'Computer Equipment', value: 3700.49, }, { name: 'Office Equipment', value: 900.79, }, ], }, name: 'Assets', value: 15007.9, },No sé qué está buscando exactamente, pero traté de reproducir su problema e hice algunos cambios en él. A continuación se muestra el código:
import { useEffect } from "react"; const Data = { 'Current Assets': { name: 'Current Assets', value: 10000.62, items: [ { name: 'Bank', value: 1600.11, items: [ { name: 'hello', value: -65.43, }, { name: 'Business Bank Account', value: 1760.54, }, ], }, { name: 'Accounts Receivable', value: 9222.51, }, ], }, 'Fixed Assets': { name: 'Fixed Assets', value: 4600.28, items: [ { name: 'Computer Equipment', value: 3700.49, }, { name: 'Office Equipment', value: 900.79, }, ], }, name: 'Assets', value: 15007.9, } function App() { return ( <ul> {Object.values(Data).map((val) => ( <> {val.name && <h3>Name : {val.name}</h3>} {val.value && <h3>Value : {val.value}</h3>} {val.items && val.items.map(val2 => ( <table style={{border:"1px solid black"}} > <tr> <td style={{borderRight:"1px solid black"}}>Item Name: {val2.name}</td> <td style={{borderRight:"1px solid black"}}>Item Value: {val2.value}</td> </tr> </table> ))} </> ))} </ul> ); } export default App; Como los datos completos son un solo objeto, debe recorrer Object.values(Data) . Con eso y usando el operador && para verificar si existe una propiedad o no, debería hacer el trabajo.