Question

我知道这个问题会以不同的方式被问到，但我正在努力解决如何处理从API URI返回的数据并希望更清楚地了解如何正确使用它。

我正在练习API并决定制作一个从openweathermap.com获取数据的简单天气应用程序

示例URI是http://api.openweathermap.org/data/2.5/weather?q=Los+Angeles&APPID=myApiKey

我使用我的页面上的输入汇总了这些数据，这些输入填写了您键入的任何城市或邮政编码并打印完整路径，因为链接工作正常。但是，当我尝试解析此URI中的数据时，我收到错误

Uncaught SyntaxError: Unexpected token h in JSON at position 0
    at JSON.parse (<anonymous>)
    at getWeather (index.js:25)
    at HTMLButtonElement.onclick

我正在尝试分解此API数据中的数据，以便我可以正确显示温度，风，湿度等内容。

这是我编写的代码，用于测试我是否正确获取数据。

// Set API variables
const api = "http://api.openweathermap.org/data/2.5/weather?q=";
const apiKey ="myAPIKey";

// Set City and Units
let unitType = "imperial";
let units = "&units=" + unitType;

function setup() {
  var button = document.getElementById('submit');
  button.click = getWeather();
}


function getWeather() {
  let city = document.getElementById('city').value;
  let fullPath = api + city + "&APPID=" + apiKey + units;

  console.log(city);
  //document.getElementById('weatherData').innerHTML='<a href="' + fullPath + '">' + city + '</a>';

  let data = fullPath;
  let obj = JSON.parse(data);
  document.getElementById('weatherData').innerHTML = obj.main.temp;
}

单击页面上的提交按钮时会调用getWeather()函数，如下所示：

<!doctype html>
<html>
  <head></head>
  <body>
    <input type="text" id="city" placeholder="Enter a city" />
    <button onclick="getWeather()" id="submit">Submit</button>
    <div id="weatherData" style="background: #ccc; padding: 20px; margin-top: 25px;">
    </div>


    <script src="index.js"></script>
  </body>
</html>

我做错了什么？我以前从未使用过API，如果我在这里看起来很无知，请原谅我。当我有程序只是在屏幕上打印一个连接的URL（链接到URI本身）它工作，但现在我正在尝试实际提取数据我从上面得到错误。

编辑这里是返回的API数据的示例：

{
  "coord": {
    "lon": -96.81,
    "lat": 32.78
  },
  "weather": [
    {
      "id": 804,
      "main": "Clouds",
      "description": "overcast clouds",
      "icon": "04d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 295.15,
    "pressure": 1016,
    "humidity": 78,
    "temp_min": 294.15,
    "temp_max": 296.15
    },
  "visibility": 20921,
  "wind": {
    "speed": 4.1,
    "deg": 180
  },
  "clouds": {
    "all": 100
  },
  "dt": 1491835980,
  "sys": {
    "type": 1,
    "id": 2596,
    "message": 0.0099,
    "country": "US",
    "sunrise": 1491825755,
    "sunset": 1491872065
  },
  "id": 4684888,
  "name": "Dallas",
  "cod": 200
}

Answer 1

let fullPath = api + city + "&APPID=" + apiKey + units; // fullPath is a string representing an URL
let data = fullPath; // data is a string representing an URL
let obj = JSON.parse(data); // You try to parse an URL, not JSON

您尝试解析网址，因此无法正常工作。在此URL上发出XHR请求以获取您的JSON数据。

编辑：

要请求远程JSON文件，请使用fetch API（如果您的浏览器未实现提取，请使用polyfill）：

fetch('/data.json')
  .then(function(response) {
    return response.json();
}).then(function(json) {
    console.log('parsed json', json);
}).catch(function(ex) {
    console.log('parsing failed', ex);
})

如何使用纯JavaScript从API解析JSON？

1 个答案: