I have list of categories. each category is like this:
{
id,
name,
info
}
I want to loop through the list and change eat category's info after a http get request. i have searched and read the similar questions but nothing is working. the info always have it's initial value
In the snippet below:
categories array and after the data has been fetched I am updating the info property.NOTE:
A common mistake here could be that you're logging the categories array before the async task is completed.
So, in the code below if I replace getData().then(() => console.log(categories)); by getData(); console.log(categories); then I would not see the updated value of info.
const categories = [
{
id: 1,
name: "delectus aut autem",
info: "not fetched",
url: "https://jsonplaceholder.typicode.com/todos/1",
},
{
id: 2,
name: "quis ut nam facilis",
info: "not fetched",
url: "https://jsonplaceholder.typicode.com/todos/2",
},
];
const getData = async () => {
for (let cat of categories) {
const res = await fetch(cat.url);
const json = await res.json();
cat.info = "fetched";
}
};
getData().then(() => console.log(categories));
You can use forEach like below:
arr.forEach(function(part, index) {
this[index] = "hello world";
}, arr); // use arr as this
arr as the this value. The callback function already gets called with the iterated array as its third argument. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…