Fetching multiple data from JSON in lists

Question

at the beginning I want to say that I checked a lot of solutions but none of it was straight accurate to my problem. I wonder if it's possible to fetch data from JSON (name, surname and id). In every of each list will be other data. The issue is length of lists will be as much as JSON's length so it has to be automatically generated, but unfortunately in promises, you are not allowed to make functions so what is the solution for that problem?

const nameList = document.querySelector('.name-list')
const surnameList = document.querySelector('.surname-list')
const idList = document.querySelector('.id-list')


fetch('http://www.json-generator.com/api/json/get/cuSKqtKmgi?indent=2')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

body{
    display: flex;
    justify-content: space-around;
}

<body>
   <ul class="name-list">
    </ul>
    <ul class="surname-list">
    </ul>
    <ul class="id-list">
    </ul>
    <ul class="example">
        <li>Example1</li>
        <li>Example2</li>
        <li>Example3</li>
        <li>Example4</li>
        <li>Example5</li>
    </ul>
</body>

That is only an exercise but will help me understand fetch more. If something is unclear feel free to ask :)

Not sure what you mean with "but unfortunately in promises, you are not allowed to make functions". Besides that, you can iterate over the data (right where you console.log) and insert items in the 3 lists. — Gabriele Petrioli
– Gabriele Petrioli, Commented Mar 11, 2021 at 22:25
@GabrielePetrioli I had Uncaught (in promise) TypeError: can't access property "forEach", data.person.name is undefined error that's why I thought you're not allowed to do that, thanks :) — Stairss
– Stairss, Commented Mar 11, 2021 at 22:31

atilkan · Accepted Answer · 2021-03-11 22:29:18Z

1

Maybe it is simple like:

let names = []
let surnames = []
let ids = []

fetch('http://www.json-generator.com/api/json/get/cuSKqtKmgi?indent=2')
.then(response => response.json())
.then(data => {        
    data.person.forEach(item => {
      names.push(item.name)
      surnames.push(item.surname)
      ids.push(item.id)
    })
});

answered Mar 11, 2021 at 22:29

atilkan

5,1031 gold badge33 silver badges36 bronze badges

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

1 Comment

Stairss Over a year ago

Thank you for your solution, it really helps :)

Majed Badawi · Accepted Answer · 2021-03-11 22:25:31Z

0

You can use .forEach as follows:

const nameList = document.querySelector('.name-list')
const surnameList = document.querySelector('.surname-list')
const idList = document.querySelector('.id-list')

fetch('http://www.json-generator.com/api/json/get/cuSKqtKmgi?indent=2')
  .then(response => response.json())
  .then(data => {
    const { person = [] } = data;
    person.forEach(({ name, surrname, id }) => {
      nameList.innerHTML += `<li>${name}</li>`;
      surnameList.innerHTML += `<li>${surrname}</li>`;
      idList.innerHTML += `<li>${id}</li>`;
    });
  });

body{ display: flex; justify-content: space-around; }

<ul class="name-list"></ul>
<ul class="surname-list"></ul>
<ul class="id-list"></ul>

answered Mar 11, 2021 at 22:25

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

2 Comments

Stairss Over a year ago

This is exactly what I wanted but can it be done in a different way instead of using innerHTML?

Majed Badawi Over a year ago

@Stairss check this: stackoverflow.com/questions/47951287/…

Collectives™ on Stack Overflow

Fetching multiple data from JSON in lists

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related