DEV Community

loading...

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

ivkemilioner profile image ivkeMilioner Updated on ・1 min read

This is my code :

window.addEventListener('load', () => {
let long; //longitude:
let lat; //latitude;
let temperatureDescription = document.querySelector('.temperature-description');
let temperatureDegree = document.querySelector('.temperature-degree');

//if location exist in browser
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        long = position.coords.longitude;
        lat = position.coords.latitude;


        let proxy = 'https://cors-anywhere.herokuapp.com/';

        //Dark Sky API --- api key is in api address after forecast/
        //on the end of api change numbers for longitude & latitude in variable
        const api = '${proxy}https://api.darksky.net/forecast/09e239664b0eb3d9ee3f2e5e9463217a/${lat},${long}';

        // fetch extract info from const api
        fetch(api)
        // return fetch data to Json 
        .then(response => {
            return response.json();
        })
        .then(data=>{
                const {temperature, summary } = data.currently;
            });
    });
}
Enter fullscreen mode Exit fullscreen mode

});

Discussion

pic
Editor guide
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 Author

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

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
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 Author

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 Author

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