DEV Community

I can't find where is error . SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

ivkeMilioner on November 28, 2019

This is my code : window.addEventListener('load', () => { let long; //longitude: let lat; //latitude; let temperatureDescription = ...
Collapse
 
savagepixie profile image
SavagePixie

Before you try response.json, could you log the returned data on your console and give us an idea of what it looks like? It sounds like it's not a valid json.

Collapse
 
ivkemilioner profile image
ivkeMilioner

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Collapse
 
savagepixie profile image
SavagePixie

But that's the error you're getting, isn't it? Try doing this:

fetch(api)
   .then(response => {
      console.log('Response:', response)
      return response.json();
})

And let us know what you get in the console after Response:

Thread Thread
 
blindfish3 profile image
Ben Calder • Edited

Logging the response will help, but a quicker approach to debugging this would be to run it in the browser with dev tools open on the network tab and confirm that:

  • the request you're making is properly formed: e.g. string parameters are included as expected
  • the response is what you expect: i.e. json

You can see the contents by selecting the response in the list and it'll then show tabs where you can expand details

Thread Thread
 
devdrake0 profile image
Si

It's a different approach, I wouldn't say it's "quicker".

Thread Thread
 
blindfish3 profile image
Ben Calder

There's nothing wrong with console.log, but it soon becomes tedious adding and removing it from your code. That definitely takes longer than hitting
F12 + a couple of mouse clicks to get to the Network tab; which doesn't even require you to open your editor.

Thread Thread
 
devdrake0 profile image
Si

Right, but the person you replied to said about adding one console.log

Thread Thread
 
blindfish3 profile image
Ben Calder

I wasn't being critical of the previous response. I just pointed out that in this context there's another approach that doesn't require console.log; that is certainly quicker; and that also illustrates a really useful debugging tool.
You however are adding nothing to the conversation...

Thread Thread
 
devdrake0 profile image
Si

I didn't say you were, but you're wrong when you say it's quicker. Depending on skill level, it could take a lot longer.

Even with a high skill level, sometimes a quick console.log is best.

I think you need to calm yourself down.

Thread Thread
 
blindfish3 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Ben Calder

ROFL. You're being utterly pedantic. That's like saying a hand drill is quicker for someone who doesn't know how to use an electric drill. In the context described - i.e. debugging network requests - the network tab will always be the quickest way to see the result of a failed response.

As I said: I added this as a potentially useful avenue of learning (which may indeed be slower for those unfamiliar with the browser debugger; but will save them a lot of key-strokes in the long run). I don't see what you are adding to this conversation: are you saying we shouldn't suggest better solutions when they are available?

And it's going to take more than a couple of passive/aggressive comments to bring me out of my calm zone :D

Thread Thread
 
ivkemilioner profile image
ivkeMilioner

Thank you very much for info and your time!!! You helped me a lot!

Collapse
 
blindfish3 profile image
Ben Calder

As others have said: the answer will be found by inspecting the response. It could be that you're actually receiving HTML - sometimes you see this when the request URL is blocked or you've passed invalid parameters...

Collapse
 
manan30 profile image
Manan Joshi

Maybe your response is empty.

Collapse
 
ivkemilioner profile image
ivkeMilioner

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data