What is the best way to retrieve data from an array of promises when utilizing promise.all in JavaScript?

Question

What is the best way to retrieve data from an array of promises when utilizing promise.all in JavaScript?

I'm struggling to retrieve information from the restcountries.eu API using a promise.all method, and I am having difficulty identifying the issue.

function displayCurrency(currencyone, currencytwo) {
    
    Promise.all([
        fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`),
        fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`)
    ])
        .then(function (responses) {
            return responses.map(function (response) {
                return response.json();
            });
        }).then(function (data) {
          
            console.log(data[0]);


        }).catch(function (error) {
            console.log(error);
        });

}

data[0] returns a resolved promise containing an array. Despite my attempts to access data within the array like 'name' and 'currencies', all I receive is undefined values.

javascript fetch-api

Answer 1

Answer №1

When you're mapping after the initial fetch, you end up creating an array of .json() calls that are essentially Promises. To handle this, you must once again apply Promise.all.

// This code snippet is not executable and hidden by default;
// Using a more elegant approach is recommended

function displayCurrency(currencyone, currencytwo) {
    const arrOfJsonProms = Promise.all([
        fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`),
        fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`)
    ])
        .then(function (responses) {
            return responses.map(function (response) {
                return response.json();
            })
        });
    Promise.all(arrOfJsonProms)
        .then(function (data) {
            console.log(data[0]);
        }).catch(function (error) {
            console.log(error);
        });
}

Alternatively, a cleaner solution would be to call .json directly within the initial Promise.all, making the code simpler while avoiding the need to wait for all connections to initialize before downloading data:

function displayCurrency(currencyone, currencytwo) {
    Promise.all([
        fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`).then(res => res.json()),
        fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`).then(res => res.json())
    ])
        .then(function (data) {
            console.log(data[0]);
        }).catch(function (error) {
            console.log(error);
        });
}

Answer 2

When you're mapping after the initial fetch, you end up creating an array of .json() calls that are essentially Promises. To handle this, you must once again apply Promise.all.

// This code snippet is not executable and hidden by default;
// Using a more elegant approach is recommended

function displayCurrency(currencyone, currencytwo) {
    const arrOfJsonProms = Promise.all([
        fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`),
        fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`)
    ])
        .then(function (responses) {
            return responses.map(function (response) {
                return response.json();
            })
        });
    Promise.all(arrOfJsonProms)
        .then(function (data) {
            console.log(data[0]);
        }).catch(function (error) {
            console.log(error);
        });
}

Alternatively, a cleaner solution would be to call .json directly within the initial Promise.all, making the code simpler while avoiding the need to wait for all connections to initialize before downloading data:

function displayCurrency(currencyone, currencytwo) {
    Promise.all([
        fetch(`https://restcountries.eu/rest/v2/currency/${currencyone}`).then(res => res.json()),
        fetch(`https://restcountries.eu/rest/v2/currency/${currencytwo}`).then(res => res.json())
    ])
        .then(function (data) {
            console.log(data[0]);
        }).catch(function (error) {
            console.log(error);
        });
}

Answer 3

Answer №2

If you're looking to harness the power of async/await, you can do so with the following approach:

const fetchCurrencyData = async (currencyCode1, currencyCode2) => {
  try {
    let responses = await Promise.all([
      fetch(`https://restcountries.eu/rest/v2/currency/${currencyCode1}`),
      fetch(`https://restcountries.eu/rest/v2/currency/${currencyCode2}`),
    ]);
    let data = await Promise.all(
      responses.map(async (response) => await response.json())
    );
    console.log(data[0]);
  } catch (error) {
    console.log(error);
  }
};

fetchCurrencyData("eur", "aud");

Answer 4

If you're looking to harness the power of async/await, you can do so with the following approach:

const fetchCurrencyData = async (currencyCode1, currencyCode2) => {
  try {
    let responses = await Promise.all([
      fetch(`https://restcountries.eu/rest/v2/currency/${currencyCode1}`),
      fetch(`https://restcountries.eu/rest/v2/currency/${currencyCode2}`),
    ]);
    let data = await Promise.all(
      responses.map(async (response) => await response.json())
    );
    console.log(data[0]);
  } catch (error) {
    console.log(error);
  }
};

fetchCurrencyData("eur", "aud");

What is the best way to retrieve data from an array of promises when utilizing promise.all in JavaScript?

Answer №1

Answer №2

Similar questions

Issue with Submit Event in React - Enter Key Fails to Trigger

Having trouble deciphering this snippet of Express JS source code

Different types of forms displayed together with a sole submission button in a separate section

Experiencing a hiccup in your jQuery animation?

The error message "TypeError: language.map is not a function" occurred while attempting to retrieve data with

"What could be the reason for web3.eth.getAccounts() method returning an empty array when used with console.log

Tips for utilizing AJAX in Angular to load web pages in partials

How to efficiently retrieve a form's data from multiple forms with identical ids in JavaScript

Every Dynamic Post automatically defaults to the initial object

Modifying the parent directive's DOM in response to an event triggered by the child directive

Ways to convert all keys to uppercase in an array of objects?

Struggling to display Firestore data in a React component - useRef() does not trigger re-render and useState() throws an error

Refining a collection of deeply nested objects

Is it possible to import the headers from a CSV file into a table for the purpose of comparing them to the existing headers in the system?

Creating dropdown menus dynamically and populating them based on the selection made in one dropdown menu to determine the options available

What is the best way to add a bottom border to each row in a textarea?

JavaScript and JSON interchangeably, the first AJAX response should be rewritten by the second response

Ways to activate a special function after clicking a social media button?

An issue has occurred: Unable to access information of unknown origin (reading 'admin')

Two Elements Linked Together