I have 1 constant called people with data about two people with many sub-attributes like name, weight, height, stats, etc. How do I display this in 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"
}
}
]
},
]It depends on how you want to print it. If you want to print it as it is try the below approach. Below code uses JSON.stringify() with some spacing provided in third argument. Make sure to use html pre tag to display it.
If you want to show only some data from the object, use Object.entries, Object.keys, Object.values to iterate the object and extract the data you want. Once you have the data, you can show it in HTML as you like.
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>You can make a loop in Javascript and iterate each object in array
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>