返回的 json 响应/javascript 中缺少属性答案

【问题标题】：property missing in returned json response / javascript返回的 json 响应/javascript 中缺少属性
【发布时间】：2018-04-06 22:44:04
【问题描述】：

我正在 React 中开发一些显示温度和降雨预报的天气小部件。我从 OpenWeather 获取数据，我的 json 响应如下所示：

//rainy day
0:{
  main: {
    temp:10}
  rain: {
    3h: 1000}
}
//sunny day
1:{
  main: {
    temp:10}
}

问题是 rain.3h 属性只有当它有一些数据时才会出现在返回的响应中，否则它会丢失。我的请求如下所示：

async getForecast(term) {
  const forecastUrl = "http://api.openweathermap.org/data/2.5/forecast?q=" + term + "&appid=" + apiKey + "&lang=us&units=metric&cnt=16";
  try {
    let response = await fetch(forecastUrl);
    if (response.ok) {
      let jsonResponse = await response.json();
      let forecast = jsonResponse.list.map(
        day => {
          return {
            temp: day.main.temp,
            rain: day.rain["3h"], // can't map missed property
          }
        }
      )
      return (forecast);
    }
  } catch (error) {
    console.log(error);
  }
}

我得到了错误 TypeError：无法读取未定义的属性“3h”。当响应中缺少该属性时，如何添加默认下雨：0

【问题讨论】：

嗨！您的 JSON 绝对不是那样的，因为需要引用键。您能否发布 exact JSON 响应？
是的，这只是一个缩短版。确切的一个是screencast.com/t/DX8fMtzqNtD6

标签： javascript json reactjs

【解决方案1】：

您可以使用三元运算符进行检查

 let forecast = jsonResponse.list.map(
        day => {
          return {
            temp: day.main.temp,
            rain: day.rain?day.rain["3h"] : ''
          }
        }
      )

【讨论】：

这是conditional operator。 JavaScript 中还没有空合并运算符。
严格来说是ternary operator
@lascort 是的，对不起

【解决方案2】：

你应该检查属性是否存在

var obj = {};
obj.temp = day.main.temp;

if (day.hasOwnProperty("rain") && day.rain.hasOwnProperty("3h"))
  obj.rain = day.rain["3h"];

return obj;

【讨论】：

【解决方案3】：

您可以使用带双与号“&&”的赋值：

let forecast = jsonResponse.list.map(
  day => {
    return {
      temp: day.main.temp,
      rain: day.rain && day.rain["3h"] || 0
    }
  }
)

这是可行的，因为如果 day.rain 未定义，那么布尔表达式的第二部分将不会被计算，避免了未定义错误的无法读取属性，并且来自 OR 的值将用于默认赋值。

【讨论】：