Array Empty After Fetch() and array.push()

Question

I have a fetch call to an API that iterates over the returned JSON using callbacks and then I want to output the result into the console. The issue is that I feel like even though this should be doing it asynchronously, I am using the then() call, which I was under the impression it would wait for the return and print out properly. But on the first call, it prints out an empty array in the console, then on the second button press it logs the array correctly.

function getPrice() {
  var valueArray = [];

  var symbol = document.getElementById("symbol_input").value;
  var url = "https://api.iextrading.com/1.0/stock/" + symbol + "/chart"
  fetch(url)
    .then(res => res.json())
    .then(function(res) {
      res.forEach(element => {
        valueArray.push(element);
      });
    })
    .then(console.log(valueArray))
    .catch(err => console.log(err));
}

<input type="input" id="symbol_input">
<button id="priceButton" onclick="getPrice()">Get Price</button>

CertainPerformance · Accepted Answer · 2018-07-17 01:12:40Z

6

.then accepts a function as a parameter, not a plain statement like .then(console.log(valueArray)). Done like that, the console.log will execute immediately (before the fetch completes).

Use a function instead. (Example input to use: "abc")

function getPrice() {
  var valueArray = [];

  var symbol = document.getElementById("symbol_input").value;
  var url = "https://api.iextrading.com/1.0/stock/" + symbol + "/chart"
  fetch(url)
    .then(res => res.json())
    .then(function(res) {
      res.forEach(element => {
        valueArray.push(element);
      });
    })
    .then(() => console.log(valueArray))
    .catch(err => console.log(err));
}

<input type="input" id="symbol_input">
<button id="priceButton" onclick="getPrice()">Get Price</button>

answered Jul 17, 2018 at 1:12

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Collectives™ on Stack Overflow

Array Empty After Fetch() and array.push()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related