How to populate array with values from API using "fetch" in javascript function

Question

I'm trying to write a function that builds an array where each value of the array is a value pulled from an API using a unique url, once the value is fetched from the API it is pushed into the existing array.

Basically when the function is called I want to populate an array with fetched API data for each stock ticker listed in the List, what i have so far doesnt seem to be working though

List: [
                { tick: "AAPL", datePurch: "01/01/2021"},
                { tick: "GOOG", datePurch: "01/01/2021"},
                { tick: "TSLA", datePurch: "01/01/2021"},
                { tick: "J", datePurch: "01/01/2021"},
                { tick: "AMZN", datePurch: "01/01/2021"},
                { tick: "FB", datePurch: "01/01/2021"},
                { tick: "BABA", datePurch: "01/01/2021"},
                { tick: "JNJ", datePurch: "01/01/2021"},
                { tick: "JPM", datePurch: "01/01/2021"},
                { tick: "XOM", datePurch: "01/01/2021"},
                ],

 totalPortfolio(){
        const arr = List.map((i) => (
            fetch(`${IEX.base_url}/stock/${i.tick}/intraday-prices?chartLast=1&token=${IEX.api_token}`)
                .then(response => response.json())
                .then(arr => arr.push(arr))
            ));
        console.log(arr);
    }

AKX · Accepted Answer · 2021-03-22 20:18:11Z

1

You'll need to await for all of the fetches to finish before you log things.

Reworking your code to async/await functions and adding the required Promise.all():

const List = [
  { tick: "AAPL", datePurch: "01/01/2021" },
  { tick: "GOOG", datePurch: "01/01/2021" },
  { tick: "TSLA", datePurch: "01/01/2021" },
  { tick: "J", datePurch: "01/01/2021" },
  { tick: "AMZN", datePurch: "01/01/2021" },
  { tick: "FB", datePurch: "01/01/2021" },
  { tick: "BABA", datePurch: "01/01/2021" },
  { tick: "JNJ", datePurch: "01/01/2021" },
  { tick: "JPM", datePurch: "01/01/2021" },
  { tick: "XOM", datePurch: "01/01/2021" },
];

async function getIntradayPrice(tick) {
  const resp = await fetch(`${IEX.base_url}/stock/${tick}/intraday-prices?chartLast=1&token=${IEX.api_token}`);
  return resp.json();
}

async function totalPortfolio() {
  const respPromises = List.map(({ tick }) => getIntradayPrice(tick));
  const respArrays = await Promise.all(respPromises);
  console.log(respArrays);
}

answered Mar 22, 2021 at 20:18

AKX

171k16 gold badges146 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jerry123 Over a year ago

Thanks for the response. I'm getting "'getIntradayPrice' is not defined" for when its being called in the map function. Any ideas why? I've added bindings in my react app for the functions and I'm still getting the same error

AKX Over a year ago

If you're getting that error, it means, well, exactly that. The function isn't defined in the scope you're trying to use it in.

Jerry123 Over a year ago

Do you know of any way to get the 'getIntradayPrice' function in scope for the function call in the second function? Nest the function? I've tried a few different options but its not working as written above

AKX Over a year ago

The code as it is exactly above should work just fine (if you have IEX.base_url and so on available).

Jerry123 Over a year ago

It looks like the problem was I should've accessed those methods as part of a class (ie this.getIntradayPrice). Your solution now works! thanks

Collectives™ on Stack Overflow

How to populate array with values from API using "fetch" in javascript function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related