property missing in returned json response / javascript

Question

Im working in React on some weather widget which displays temp and rain forecast. Im fetching data from OpenWeather and my json response looks like:

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

the problem is rain.3h property appears in returned response only when it has some data, otherwise its missing. My request looks like:

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

And Im getting error TypeError: Cannot read property '3h' of undefined. How may I add default rain:0 when the property is missing from response

Hi! Your JSON definitely doesn't look like that, because keys need to be quoted. Can you please post the exact JSON response? — msanford
– msanford, Commented Oct 25, 2017 at 18:07
yes that was just a shortened version. exact one is screencast.com/t/DX8fMtzqNtD6 — JakubS
– JakubS, Commented Oct 25, 2017 at 18:15

Sajeetharan · Accepted Answer · 2017-10-25 18:35:20Z

1

You could do a check using ternary operator

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

edited Oct 25, 2017 at 18:35

answered Oct 25, 2017 at 18:08

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Felix Kling Over a year ago

This is the conditional operator. There is no null-coalescing operator (yet) in JavaScript.

martskins Over a year ago

Strictly speaking, that's a ternary operator

Sajeetharan Over a year ago

@lascort yeah sorry

void · Accepted Answer · 2017-10-25 18:09:17Z

0

You should check whether the property exists or not

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

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

return obj;

answered Oct 25, 2017 at 18:09

void

36.8k10 gold badges72 silver badges111 bronze badges

Comments

dasfrosty · Accepted Answer · 2017-10-25 18:33:50Z

0

You can use assignment with double ampersand "&&":

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

This works because if day.rain is undefined then the second part of the boolean expression will not be evaluated, avoiding the cannot read property of undefined error, and the value from the OR will be used for default assignment.

edited Oct 25, 2017 at 18:33

answered Oct 25, 2017 at 18:16

dasfrosty

3993 silver badges5 bronze badges

Collectives™ on Stack Overflow

property missing in returned json response / javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related