Promise.all to fetch JSON Datas is Empty

August 17, 2022

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);
  }

>Solution :

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));
}