fetch(`./User.json`, { method: "get" })
.then(response => response.json())
.then(data =>
data.results.forEach(result => (list.innerHTML += template(result)))
)
.catch(error => console.log(error));
I want to add some json data. what's the solution. That's my code.
Assuming you want all requests to complete, regardless of their response status, then Promise.allSettled() is an excellent choice
// handy "get" shortcut with error handling
const get = async (url) => {
const res = await fetch(url) // "GET" is the default method
if (!res.ok) {
throw new Error(`${res.status}: ${await res.text()}`)
}
return res.json()
}
const urls = ["./Foo.json", "./Bar.json", "./Baz.json"]
Promise.allSettled(urls.map(get)).then(responses => {
const data = responses
.filter(({ status }) => status === "fulfilled")
.map(({ value }) => value)
})
You can use Promise.all method to get the values of the fetch calls once all the promises have resolved, you'd get the values in an array which you can destruct as shown below
Promise.all([fetch(`./User.json`, { method: "get" }).then(response => response.json())]), fetch(`./Products.json`, { method: "get" }).then(response => response.json())]).then([users, products]=>
users.results.forEach(result => (list.innerHTML += template(result)))
)