Fetching JSON data using Promise.all results in an empty response

Question

Fetching JSON data using Promise.all results in an empty response

I'm facing an issue in my code where I am trying to fetch data from two different JSON files and then return them as arrays. Even after implementing the solution below, it doesn't seem to be working as expected. Can someone guide me on how I can successfully log those arrays onto the console?

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

javascript angular typescript promise

Answer 1

Answer №1

When working with Promise.all, the returned result may appear to be "empty" (actually a Promise) if it has not resolved by the time of logging. To address this, make sure to either use await or capture the result using .then.

One approach could be to write const x = await Promise.all(...) outside of a constructor within a method, or utilize Promise.all(...).then(...).

Answer 2

When working with Promise.all, the returned result may appear to be "empty" (actually a Promise) if it has not resolved by the time of logging. To address this, make sure to either use await or capture the result using .then.

One approach could be to write const x = await Promise.all(...) outside of a constructor within a method, or utilize Promise.all(...).then(...).

Answer 3

Answer №2

Don't add unnecessary complexity to your code with excessive use of async

The problem lies in the fact that x is a Promise ... an unresolved Promise when you log it

Consider using the following approach instead

urls = [
    'data/products.json',
    'data/categories.json',
];

constructor(private _http: HttpClient) {
    const fetchData = (url) => fetch(url).then(response => response.json());
    
    Promise.all(this.urls.map(this.fetchData))
    .then(x => console.log(x));
}

Answer 4

Don't add unnecessary complexity to your code with excessive use of async

The problem lies in the fact that x is a Promise ... an unresolved Promise when you log it

Consider using the following approach instead

urls = [
    'data/products.json',
    'data/categories.json',
];

constructor(private _http: HttpClient) {
    const fetchData = (url) => fetch(url).then(response => response.json());
    
    Promise.all(this.urls.map(this.fetchData))
    .then(x => console.log(x));
}

Fetching JSON data using Promise.all results in an empty response

Answer №1

Answer №2

Similar questions

Challenges arise when trying to coordinate scrolling movements between a canvas element and the remaining content on the webpage

Encountering a TypeError indicating that the asterisk is not functioning as a proper function

Guide to retrieving a .txt file from a separate domain using server-side JavaScript and transferring it to the client side

execute javascript code found in the html document

The Nextjs framework is experiencing a high total blocking time in its *****.js chunk

Extract information from a JSON file and import it into an Angular TypeScript file

Utilize the datepicker function in jQuery version 1.6.3 to select a range of dates

Encountering an Invalid JSON error on the Developer console

Creating a custom comparison method between two select dropdowns using the jQuery Validation plugin

Adjust the href attribute of a link dynamically using the value input from a text field immediately

Why is my Angular form submitting twice?

Animating a dotted border path in SVG for a progress bar effect

Modify the background color of the entire page when the main div is clicked

Include an option for whitespace characters when validating a file using regex

Setting the selected value of a radio button in an edit form: a step-by-step

I have a JSON object with a nested "src" value that I want to display on my webpage using Vue. How can I target and select this specific value?

Angular template in PhpStorm displaying error: Unresolved pipe issue

I'm having trouble utilizing toastify.js after installing it via npm. I keep receiving the error message "Failed to resolve module specifier." Any advice

Insert information into a 3-tiered nested Angular FormArray within interconnected dropdown fields

What is the best way to link a specific version of the @types package to its corresponding JavaScript package version?