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

#javascript #darksky #api #help

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

});

Top comments (14)

SavagePixie • Nov 28 '19

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.

ivkeMilioner • Nov 29 '19

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

SavagePixie • Nov 29 '19

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:

Ben Calder • Nov 29 '19 • 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

Si • Dec 2 '19

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

Ben Calder • Dec 2 '19

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.

Si • Dec 2 '19

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

Ben Calder • Dec 2 '19

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

Si • Dec 2 '19

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.

Comment marked as low quality/non-constructive by the community. View Code of Conduct

Ben Calder • Dec 3 '19

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

ivkeMilioner • Dec 3 '19

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

Ben Calder • Nov 29 '19

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