Fetch Issue : Uncaught (in promise)

JavaScript
1

I have an issue when I try to fetch, my console returns me this

Uncaught (in promise) SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

So, I went in my code & I can’t see where is the issue
My code so far


const pokedex = "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";

const pokemons = [];

fetch(pokedex, {mode : "no-cors"})
.then (blob => blob.json())
.then (data => pokemons.push(data))

Pretty simple, I fixed the CORS issue but idk where is the other issue.
Ty for your help

2

Not sure the CORS thing is an issue here. I played around with it and it spit out the array. Notice I am consoling things out so I can see what’s happening.

    const pokedex = "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";

const pokemons = [];

fetch(pokedex)
.then (blob => {
    const thing = blob.json();
    console.log(thing);
    return thing;
})
.then (data => {
    pokemons.push(data);
    console.log(pokemons)
})

//pokemon: Array(151)
3

I’m not a CORS expert but after some digging on MDN, I found the following:

no-cors — ( … ) In addition, JavaScript may not access any properties of the resulting Response. (MDN)

When I removed { mode: "no-cors" } It fetched a data for me without any problems.

https://codepen.io/sitek94/pen/KKMVzPd?editors=0012

1 Like
4

Well, I dont understand. I deleted the “no-cors”, it works now… But when I try to push it wont.

fetch(pokedex)
   .then(blob => 
     blob.json())     
.then (data => console.log(data))

Catctus, you answer works but I dont understand, you just put blob in a variable & tada.
And yeah, Sitek, I saw this too, frustrating me, because before it wouldnt works…
I just think Fetch doesnt manage well narrow single function.

Well, i’ll dig into it later, thx for the help guys !

5

Hey @DB07, are you sure it didn’t work? The output is nested, so you have to dig into the pokemons array to see it. It doesn’t output it nicely the way it’s written. I just tested this code and it worked:

const pokemons = [];

fetch(pokedex)
.then (blob => 
    blob.json()
)
.then (data => 
    pokemons.push(data)
)

console.log(pokemons);

The output looks like this is the console:

[]

But if you open it, you see on object in position 0 that has the pokemons accessible by the pokemon key. In other words, the pokemons are at pokemons[0][“pokemon”]

6

It works, you want to know what was the issue ?
Its stupid…

console.log(pokemons);

I forgot IT ! Anw, thx !

1 Like
7

Yeah, no-cors won’t make it work without cors. It’s basically saying, “Hey, this is in violation of the CORS policy, but I still want make the call and get an ‘opaque’ response where I can’t see the data but I get some of the data back.”

I’m no CORS/HTTP expert myself, but that’s how I understand it.

1 Like