JSON array call always returns with an error

Question

I've been playing around with the pokeAPI and I've made a AJAX call to the api. When I call the api everything works and I can navigate to the value I want. However whenever there is an array that I'm trying to get a value form it returns with this error.

This happens when I try to go through an array and nothing else. This is what I used to call the api.

fetch('http://pokeapi.salestock.net/api/v2/pokemon-species/' + this.state.pokemonValue + '/')
    .then(results => {
      return results.json();
    }).then(data => {
      this.setState({pokemonData: data});
    });

This is the array I'm trying to access in the api.

I get to this array with which brings me to an array of objects called "names"

The JSON file that I'm accessing is this

http://pokeapi.salestock.net/api/v2/pokemon-species/2/

const pokemon = this.state.pokemonData;
console.log(pokemon.names);

However when I try to get to one of the array items its gives the error...

console.log(pokemon.names[1]);    // === ERROR

pokemon.names? No such thing. You want pokemon[0].name... — marekful
– marekful, Commented Feb 8, 2018 at 4:11
oh no i guess i should have showed the first object i got the array of objects that contain the names is called "names" — cosmichero2025
– cosmichero2025, Commented Feb 8, 2018 at 4:16
never mind showing us the api call, which has nothing whatsoever to do with the problem, show us the raw JSON, as text in your question (not an image). Then show the code that parses the json and the code that's exploding — Bohemian
– Bohemian ♦, Commented Feb 8, 2018 at 4:24
I edited the question with the link to the json file and that is the code that parses the JSON — cosmichero2025
– cosmichero2025, Commented Feb 8, 2018 at 4:29

Koshik Raj · Accepted Answer · 2018-02-08 04:42:04Z

1

The fetch code works fine without throwing error for array indexing.

fetch('http://pokeapi.salestock.net/api/v2/pokemon-
       species/2/').then(results => {
  return results.json();
}).then(data => {
  console.log(data.names[1]);
})

The problem is with the states. Since you are using a setState in the promise then statement, both then and setState are asynchronous functions. There is a possibility that you have called console.log before setState sets the state pokemonData. You should ideally get an error for console.log(pokemon.names), since pokemon.names is undefined. But it depends on the execution time of instructions. Execute multiple times to make sure this is the actual cause. Try using a class or global variable instead of setting the state, if you are not looking for DOM update.

answered Feb 8, 2018 at 4:42

Koshik Raj

1086 bronze badges

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

4 Comments

cosmichero2025 Over a year ago

Thanks man! I'm new to react so I'm still getting a hang of how every thing should be set up I'll do some restructuring of my app. Thanks again!

cosmichero2025 Over a year ago

So would the best course of action would be to make my applicaiton wait with a loading function untill the JSON data is ready?

Koshik Raj Over a year ago

Yes. You could have a loader until the fetch returns promise. With the beauty of react states, you do not have to maintain a new variable for the loader. You can show a loader until your state has some data and display the content when it has data. A ternary condition will do for this kind of loader. Once the setState sets the JSON data, your component will automatically re-render and execute your ternary condition. Refer this to know about asynchronousity of states in react. reactjs.org/docs/faq-state.html#when-is-setstate-asynchronous

cosmichero2025 Over a year ago

Thank you very much for the article it was a big help! I have a feeling react will be very interesting and cool when I get good at it!

Collectives™ on Stack Overflow

JSON array call always returns with an error

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related