Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/json/13.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
OpenWeather API未使用Javascript连接_Javascript_Json_Api_Rest_Openweathermap - Fatal编程技术网

OpenWeather API未使用Javascript连接

OpenWeather API未使用Javascript连接,javascript,json,api,rest,openweathermap,Javascript,Json,Api,Rest,Openweathermap,我想显示我输入的州的天气状况,但它会不断提醒“城市名称错误,然后显示未定义” var button =document.querySelector('.button') var inputValue =document.querySelector('.inputValue') var nam =document.querySelector('.nam'); var desc =document.querySelector('.desc'); var temp =document.querySel

我想显示我输入的州的天气状况,但它会不断提醒“城市名称错误,然后显示未定义”

var button =document.querySelector('.button')
var inputValue =document.querySelector('.inputValue')
var nam =document.querySelector('.nam');
var desc =document.querySelector('.desc');
var temp =document.querySelector('.temp');


button.addEventListener('click',function(){
    fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputValue.value+'&appid=0c712e338cabb3996a78ae788fa566a1')
    .then(response=> response.json())
    .then(data => {
        var nameValue = data['nam'];
        var temp = data['main']['temp'];
        var descValue = data['weather'][0]['description'];
        nam.innerHTML =nameValue;
        temp.innerHTML =tempValue;
        desc.innerHTML =description;
    })
    .catch(err => alert("Wrong City name!"))
    
    })

如果您从API[1]获得错误响应,那么由于嵌套结构,您将在代码的下面几行抛出一些异常

// "main" does not exist in error response, so you 
// will get an error trying to access a child of "main".
var temp = data['main']['temp'];

// "weather" does not exist in error response, so you
// will get an error trying to access a child of "weather".
var descValue = data['weather'][0]['description'];
在尝试解析响应数据之前,最好先检查响应代码,如下所示-

.then(response => {
  if (response.cod == 200) {
    // Do your stuff
  } else {
    throw new Error(response.message)
  }
).catch(err => alert(err))
除此之外,您的代码中还有几个输入错误-

// There is no key "nam" in the response, it is "name", see success response [2].
var nameValue = data['nam'];

// You save the description as "descValue"
var descValue = data['weather'][0]['description'];
// But use "description" here
desc.innerHTML =description;
[1] 错误响应-

{
  "cod": "404",
  "message": "city not found"
}
[2] 成功响应(如果城市存在)-


console中有错误吗?Api工作正常,如果输入值包含空格/某些需要编码的字符/等,请将console.log粘贴到此处。您应该将值包装在
encodeURIComponent()中。
{
  "coord": {...},
  "weather": [...],
  "base": "stations",
  "main": {...},
  "visibility": 10000,
  "wind": {...},
  "clouds": {...},
  "dt": 1618812226,
  "sys": {...},
  "timezone": -14400,
  "id": 4350049,
  "name": "California",
  "cod": 200
}