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

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

});

Comments

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

[ivkeMilioner]

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

[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:

[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

[Si]

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

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

[Si]

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

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

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

[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

[ivkeMilioner]

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

[Manan Joshi]

Maybe your response is empty.

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

[ivkeMilioner]

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