我有 1 個稱為 people 的常量，其中包含關于兩個人的資料，其中包含許多子屬性，例如姓名、體重、身高、統計資訊等。我如何在 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"
}
}
]
},
]uj5u.com熱心網友回復：
這取決于您想如何列印它。如果您想按原樣列印它，請嘗試以下方法。下面的代碼使用JSON.stringify()并在第三個引數中提供一些間距。確保使用 htmlpre標簽來顯示它。
如果您只想顯示物件中的一些資料，請使用Object.entries、Object.keys、Object.values來迭代物件并提取您想要的資料。獲得資料后，您可以根據需要在 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"
}
}]
},
]
document.getElementById('container').innerHTML = JSON.stringify(people, undefined, 4);<h1>JSON pretty print in HTML</h1>
<pre id="container"></pre>uj5u.com熱心網友回復：
您可以在 Javascript 中進行回圈并迭代陣列中的每個物件
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/353767.html
標籤：javascript html 展示