如何使用JS为JSON中的每个对象单独输出数组?

Question

for (let pet of person.pets)未按预期输出。它是JSON中的一个数组。我得到JSON文件中所有对象的所有pet数组，而不是单个数组。我只希望下面json示例中列出的每个对象都有一个数组。

{
"name": "Nallil Keenwillow",
"age": "32",
"pets": [
"Giddo",
"Berl",
"Jaenna"
]
},

let persons;
let pets;
async function getData() {
persons = await $.getJSON('persons.json');
pets = await $.getJSON('pets.json');
renderPersonsToScreen();
}
function renderPersonsToScreen() {
for (let person of persons) {
$('body').append(/*html*/`
<div class="person">
<h1>${person.name}</h1>
<p>Age: ${person.age}</p>
</div>
`);
for (let pet of person.pets) {
$('.person').append(/*html*/`
<h2>${pet}</h2>
`
)
}
}
}
getData();

Answer 1

$('.person').append()附加到所有.person元素。您应该在刚刚添加的person元素后面追加。

function renderPersonsToScreen() {
for (let person of persons) {
let pdiv = $( /*html*/ `
<div class="person">
<h1>${person.name}</h1>
<p>Age: ${person.age}</p>
</div>
`);
for (let pet of person.pets) {
pdiv.append( /*html*/ `
<h2>${pet}</h2>
`)
}
$('body').append(pdiv);
}
}