Getting an error when I try to parse data to get values from JSON

Issue

I have the below code and it returns this error in console of the browser...

(Uncaught (in promise) SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () at script2.js:12:32)

...in const getCityData = JSON.parse(data.json). First, I get the value of input variable and onClick of btn is supposed to call a function to get a json data where I get "name":"Porto", "lat":41.1494512 and "lon":-8.6107884 to pass the parameters to url const. Here is the JSON that I expect receive:

'[{"name":"Porto","local_names":{"ascii":"Porto","el":"Πόρτο","kn":"ಪೋರ್ಟೊ","es":"Oporto","hu":"Porto","pt":"Porto","uk":"Порту","ar":"بورتو","ru":"Порту","feature_name":"Porto","lt":"Portas","sr":"Порто"},"lat":41.1494512,"lon":-8.6107884,"country":"PT"}]'

After this, const url get the coordinates and call getData function, who returns the information that I want.

//selector variable
let input = document.querySelector('#cityinput')
let btn = document.querySelector('#add');

btn.addEventListener('click', function () {
  fetch('http://api.openweathermap.org/geo/1.0/direct?q=' + input.value + '&appid=ecef7e88947b6303121bb900373e41d2').then(res => res.json())

    .then(data => {
      const getCityData = JSON.parse(data.json)
      const [{ name }] = getCityData;
      const [{ lat }] = getCityData;
      const [{ lon }] = getCityData;
      const city = name
      const latitud = lat
      const long = lon
      const url = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitud}&lon=${long}&exclude=hourly,minutely,alerts&units=metric&appid=ecef7e88947b6303121bb900373e41d2`

      function getData(infoPerRow) {
        let fragment = new DocumentFragment();
        let names = "";
        const iconCodes = {
          '01d': '<img src="https://openweathermap.org/img/wn/01d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '01n': '<img src="https://openweathermap.org/img/wn/01n@2x.png" height="42" width="42" style="vertical-align: middle">',
          '02d': '<img src="https://openweathermap.org/img/wn/02d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '02n': '<img src="https://openweathermap.org/img/wn/02n@2x.png" height="42" width="42" style="vertical-align: middle">',
          '03d': '<img src="https://openweathermap.org/img/wn/03d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '03n': '<img src="https://openweathermap.org/img/wn/03n@2x.png" height="42" width="42" style="vertical-align: middle">',
          '04d': '<img src="https://openweathermap.org/img/wn/04d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '04n': '<img src="https://openweathermap.org/img/wn/04n@2x.png" height="42" width="42" style="vertical-align: middle">',
          '09d': '<img src="https://openweathermap.org/img/wn/09d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '09n': '<img src="https://openweathermap.org/img/wn/09n@2x.png" height="42" width="42" style="vertical-align: middle">',
          '10d': '<img src="https://openweathermap.org/img/wn/10d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '10n': '<img src="https://openweathermap.org/img/wn/10n@2x.png" height="42" width="42" style="vertical-align: middle">',
          '11d': '<img src="https://openweathermap.org/img/wn/11d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '11n': '<img src="https://openweathermap.org/img/wn/11n@2x.png" height="42" width="42" style="vertical-align: middle">',
          '13d': '<img src="https://openweathermap.org/img/wn/13d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '13n': '<img src="https://openweathermap.org/img/wn/13n@2x.png" height="42" width="42" style="vertical-align: middle">',
          '50d': '<img src="https://openweathermap.org/img/wn/50d@2x.png" height="42" width="42" style="vertical-align: middle">',
          '50n': '<img src="https://openweathermap.org/img/wn/50n@2x.png" height="42" width="42" style="vertical-align: middle">',
        }

        $.getJSON(url, function (data) {

          const getData = ({ dt, temp, weather: [{ description, icon }] }) => {
            if (temp.day) temp = temp.day
            return { dt, temp, description, icon };
          }
          const { current, daily } = data;
          const result = [getData(current)]
          daily.slice(1).forEach(obj => result.push(getData(obj)));

          //Dummy Data
          info = result;
          let row;

          //infojson
          info.forEach(function (information, counter) {

            // Check if first iteration or if the row is full
            if (counter === 0 || row.querySelectorAll("p").length == infoPerRow) {
              // Create new row and class
              row = document.createElement("div");
              row.classList.add("row");

              // Append the row to the fragment
              fragment.appendChild(row);
            }

            // Update the content of row
            row.innerHTML += `<p>Date: ${information.dt}<br>Temperature: ${information.temp} ºC<br>Description: ${information.description}<br>${iconCodes[information.icon]}</p>`;
          });
          document.getElementById("forecast").appendChild(fragment)
        });
        getData(8);
      }
    });
});

Note that the getData function is working when I use it on the other page of API. I've tried just on Chrome. If You need some additional information, please tell me. Thanks

Solution

The data you are receiving is already formatted as JSON object: Replace this line:

const getCityData = JSON.parse(data.json)

With

const getCityData = data

Answered By - JaivBhup