How to fetch multiple .json files with javascript?

Question

I have multiple .json files and I want to fetch them so I can take information from them. Like user ID, name, salary... I know how to do one, but I need two of them like in const "urls", so I can take data from both of them cycle through It, and put them in HTML elements.

`

const urls = ["./fake-server/employees.json", "./fake-server/salaries.json"];

fetch("./fake-server/salaries.json").then(function (response) {
    return response.json();
})
    .then(function (data) {
        for (var i = 0; i < data.length; i++) {
            document.getElementById("data").innerHTML +=
               "Person with employee ID of " + "<span class='employee-id'>" + data[i].employeeId + "</span>" + " have salary of  " + "<span class='employee-salary'>" + data[i].salary + "</span>" + " $" + " <hr/> ";
        }
    })
    .catch(function (err) {
        console.log(err);
    });

`

you can do map on url array and within map can do fetch, make sure to wrap it in promise all — Nonik
– Nonik, Commented May 13, 2022 at 16:38

german1311 · Accepted Answer · 2022-05-13 16:55:00Z

2

@Nonik comment's is the way

const urls = ["./fake-server/employees.json", "./fake-server/salaries.json"];

const requests = urls.map(u=>fetch(u));

Promise.all(requests).then(responses => {
  responses.forEach(response => {
    cost data = response.json();

    for (var i = 0; i < data.length; i++) {
            document.getElementById("data").innerHTML +=
               "Person with employee ID of " + "<span class='employee-id'>" + data[i].employeeId + "</span>" + " have salary of  " + "<span class='employee-salary'>" + data[i].salary + "</span>" + " $" + " <hr/> ";
     }
   });

})
.catch(function (err) {
   console.log(err);
});;

answered May 13, 2022 at 16:55

german1311

935 bronze badges

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

Collectives™ on Stack Overflow

How to fetch multiple .json files with javascript?

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