CODEWITHSUNDEEP
javascriptarraysreactjsapireact-native
Jonathan Greco
Jonathan Greco

Reputation: 45

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

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: enter image description here 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?

Upvotes: 2

Views: 3566

Answers (3)

connexo
connexo

Reputation: 56754

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

Upvotes: 1

St&#233;phane BOUTEILLE
St&#233;phane BOUTEILLE

Reputation: 11

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.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 0

Related Questions