In my code, I am trying to fetch data from two JSON files and return them as an array. I did the solution below but it didn't work. What should I do to log those arrays on to the console and achieve what I want?
TS:
requests = [
'data/products.json',
'data/categories.json',
];
constructor(private _http: HttpClient) {
const x = Promise.all(this.requests.map((url) => fetch(url))).then(
async (res) => Promise.all(res.map(async (data) => await data.json()))
);
console.log(x);
}
The result of Promise.all is "empty" (technically a Promise) because it hasn't resolved by the time you are logging. You should await it or capture the result at .then.
I would rewrite that as const x = await Promise.all(...) outside of a constructor in a method or go with Promise.all(...).then(...).
You're over complicating the code with all those pointless async
The issue is, that x is a Promise ... an unresolved Promise at the time you console.log it
try the following instead
requests = [
'data/products.json',
'data/categories.json',
];
constructor(private _http: HttpClient) {
const makeRequest = (url) => fetch(url).then(response => response.json());
Promise.all(this.requests.map(this.makeRequest))
.then(x => console.log(x));
}