javascript says array.length is undefined, but not the array

Question

I'm trying to use information from the Politifact API by storing it in an array called "supperArray." I do so by calling the API three times, and pushing 10 values from each response to superArray, like so:

const URL1 = "https://www.politifact.com/api/statements/truth-o-meter/people/barack-obama/json/?n=50";
const URL2 = "https://www.politifact.com/api/statements/truth-o-meter/people/hillary-clinton/json/?n=210";
const URL3 = "https://www.politifact.com/api/statements/truth-o-meter/people/bernie-s/json/?n=70";
var superArray = [];
        fetch("https://cors-anywhere.herokuapp.com/"+URL1)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="barack-obama" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })
        fetch("https://cors-anywhere.herokuapp.com/"+URL2)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="hillary-clinton" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })
        fetch("https://cors-anywhere.herokuapp.com/"+URL3)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="bernie-s" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })

When I ask React to log supperArray in its entirety, like so:

console.log(superArray);

It logs this: Which is what I expected. But when I ask it to log a specific value, like so:

console.log(superArray[0]);

It logs is undefined Why is this?

I assume the console is fooling you by showing what superArray is at a later point of time than when you're calling console.log. console cannot fool you with superArray[0] though. — connexo
– connexo, Commented Sep 3, 2018 at 16:43

connexo · Accepted Answer · 2018-09-04 07:17:29Z

The reason is that you're not logging superArray in your fetch promise. If you add the call to console.log() in your last then() call it works. The reason for this is that fetch is executed asynchronously, which means that any additional code that comes after the fetch call is executed long before the fetch has returned anything.

The reason you can see a full log of superArray even when doing it outside the fetch is a special console behaviour.

const URL1 = "https://www.politifact.com/api/statements/truth-o-meter/people/barack-obama/json/?n=50";
const URL2 = "https://www.politifact.com/api/statements/truth-o-meter/people/hillary-clinton/json/?n=210";
const URL3 = "https://www.politifact.com/api/statements/truth-o-meter/people/bernie-s/json/?n=70";
var superArray = [];
fetch("https://cors-anywhere.herokuapp.com/" + URL1)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "barack-obama" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
  })
fetch("https://cors-anywhere.herokuapp.com/" + URL2)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "hillary-clinton" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
  })
fetch("https://cors-anywhere.herokuapp.com/" + URL3)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "bernie-s" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
    console.log(superArray[0]);
  })

Bhojendra Rauniyar · Accepted Answer · 2018-09-03 16:48:54Z

0

It's possible to be logged into your console before data is fetched. To make it sure, log that after accomplishing the data ie. inside .then().

fetch(...)
.then(results => {...})
.then(data => {...})
.then(()=> console.log(superArr[0]))

Or, you may use:

superArray.length && console.log(superArray[0]);

answered Sep 3, 2018 at 16:48

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Stéphane BOUTEILLE · Accepted Answer · 2018-09-03 16:50:02Z

0

I think the fetch of your URLs has not been executed before your console.log.

Be sure all your promises are executed before output to console.

answered Sep 3, 2018 at 16:50

Stéphane BOUTEILLE

112 bronze badges

Collectives™ on Stack Overflow

javascript says array.length is undefined, but not the array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related