The issue arises when using for (let pet of person.pets) loop. In my JSON data, the "pets" field is an array but instead of getting a single array for each object, I am getting all pet arrays for every object in the JSON file. The desired outcome is to have one array per object listed in the JSON example provided below.
{
"name": "Nallil Keenwillow",
"age": "32",
"pets": [
"Giddo",
"Berl",
"Jaenna"
]
},
let persons;
let pets;
async function fetchData() {
persons = await $.getJSON('persons.json');
pets = await $.getJSON('pets.json');
displayPersonsData();
}
function displayPersonsData() {
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>
`
)
}
}
}
fetchData();