How to output an array individually for each object in JSON using JS?

Question

The for (let pet of person.pets) does not output as expected. It is an array in the JSON. Instead of a single array, I get all the pet arrays for all objects in my JSON file. I just want one array per object listed in the JSON-example below.

{
   "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();

Barmar · Accepted Answer · 2021-03-08 20:21:39Z

1

$('.person').append() appends to all .person elements. You should just append to the person element you just added.

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);
  }
}

answered Mar 8, 2021 at 20:21

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to output an array individually for each object in JSON using JS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related