Tengo 1 persona llamada constante con datos sobre dos personas con muchos subatributos como nombre, peso, altura, estadísticas, etc. ¿Cómo muestro esto en html?
const people = [ { name: "person 1", height: 100, weight: 100, stats: [ { base_stat: 100, effort: 100, stat: { name: "hp", } }, { base_stat: 100, effort: 100, stat: { name: "attack", } }, { base_stat: 100, effort: 100, stat: { name: "defense", } }, { base_stat: 100, effort: 100, stat: { name: "special-attack", } }, { base_stat: 100, effort: 100, stat: { name: "special-defense", } }, { base_stat: 100, effort: 100, stat: { name: "speed", } } ], types: [ { slot: 1, type: { name: "something" } } ] }, { name: "person 2", height: 100, weight: 100, stats: [ { base_stat: 100, effort: 100, stat: { name: "hp", } }, { base_stat: 100, effort: 100, stat: { name: "attack", } }, { base_stat: 100, effort: 100, stat: { name: "defense", } }, { base_stat: 100, effort: 100, stat: { name: "special-attack", } }, { base_stat: 100, effort: 100, stat: { name: "special-defense", } }, { base_stat: 100, effort: 100, stat: { name: "speed", } } ], types: [ { slot: 1, type: { name: "something" } } ] }, ]Depende de cómo quieras imprimirlo. Si desea imprimirlo tal como está, intente el siguiente enfoque. El siguiente código usa JSON.stringify() con algo de espacio proporcionado en el tercer argumento. Asegúrese de usar pre html para mostrarlo.
Si desea mostrar solo algunos datos del objeto, use Object.entries , Object.keys , Object.values para iterar el objeto y extraer los datos que desea. Una vez que tenga los datos, puede mostrarlos en HTML como desee.
const people = [{ name: "person 1", height: 100, weight: 100, stats: [{ base_stat: 100, effort: 100, stat: { name: "hp", } }, { base_stat: 100, effort: 100, stat: { name: "attack", } }, { base_stat: 100, effort: 100, stat: { name: "defense", } }, { base_stat: 100, effort: 100, stat: { name: "special-attack", } }, { base_stat: 100, effort: 100, stat: { name: "special-defense", } }, { base_stat: 100, effort: 100, stat: { name: "speed", } } ], types: [{ slot: 1, type: { name: "something" } }] }, { name: "person 2", height: 100, weight: 100, stats: [{ base_stat: 100, effort: 100, stat: { name: "hp", } }, { base_stat: 100, effort: 100, stat: { name: "attack", } }, { base_stat: 100, effort: 100, stat: { name: "defense", } }, { base_stat: 100, effort: 100, stat: { name: "special-attack", } }, { base_stat: 100, effort: 100, stat: { name: "special-defense", } }, { base_stat: 100, effort: 100, stat: { name: "speed", } } ], types: [{ slot: 1, type: { name: "something" } }] }, ] document.getElementById('container').innerHTML = JSON.stringify(people, undefined, 4); <h1>JSON pretty print in HTML</h1> <pre id="container"></pre>Puede hacer un bucle en Javascript e iterar cada objeto en la matriz
const people = [ { name: "person 1", height: 100, weight: 100, stats: [ { base_stat: 100, effort: 100, stat: { name: "hp", } }, { base_stat: 100, effort: 100, stat: { name: "attack", } }, { base_stat: 100, effort: 100, stat: { name: "defense", } }, { base_stat: 100, effort: 100, stat: { name: "special-attack", } }, { base_stat: 100, effort: 100, stat: { name: "special-defense", } }, { base_stat: 100, effort: 100, stat: { name: "speed", } } ], types: [ { slot: 1, type: { name: "something" } } ] }, { name: "person 2", height: 100, weight: 100, stats: [ { base_stat: 100, effort: 100, stat: { name: "hp", } }, { base_stat: 100, effort: 100, stat: { name: "attack", } }, { base_stat: 100, effort: 100, stat: { name: "defense", } }, { base_stat: 100, effort: 100, stat: { name: "special-attack", } }, { base_stat: 100, effort: 100, stat: { name: "special-defense", } }, { base_stat: 100, effort: 100, stat: { name: "speed", } } ], types: [ { slot: 1, type: { name: "something" } } ] }, ] let text = ""; for (let i = 0; i < people.length; i++) { text += people[i] + "<br>"; } document.getElementById("target").innerHTML = text; <div id="target"></div>