当我尝试解析数据以从 JSON 获取值时出现错误

Question

我有下面的代码，它 returns 在浏览器的控制台中出现这个错误...

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

...在 const getCityData = JSON.parse(data.json) 中。首先，我得到输入变量的值，btn 的 onClick 应该调用一个函数来获取 json 数据，在那里我得到 "name":"Porto", "lat":41.1494512 和 "lon":-8.6107884 将参数传递给 url const.这是我希望收到的 JSON：

'[{"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"}]'

之后，const url获取坐标并调用getData函数，谁returns我想要的信息。

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

请注意，当我在 API 的另一页上使用它时，getData 函数正在工作。我试过 Chrome。如果您需要一些额外的信息，请告诉我。谢谢

Answer 1

您收到的数据已经格式化为 JSON 对象：替换此行：

const getCityData = JSON.parse(data.json)

有

const getCityData = data

当我尝试解析数据以从 JSON 获取值时出现错误

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

html

javascript

parsing

json