json - How to display the second value of array dynamically

Question

How would one generically pull the second item under the forecast array without defining the specific 'date' value? Currently, I have to specify the date like "2020-01-27" in order to pull the data.

I tried these but they are not working...

{{ forecast.value[1].hourly[0].weather_code }}
{{ forecast[1].hourly[0].weather_code }}

Here's the data:

{"request":{"type":"Zipcode","query":"90210","language":"en","unit":"f"},"location":{"name":"Beverly Hills","country":"USA","region":"California","lat":"34.087","lon":"-118.412","timezone_id":"America/Los_Angeles","localtime":"2021-01-26 14:07","localtime_epoch":1611670020,"utc_offset":"-8.0"},"current":{"observation_time":"10:07 PM","temperature":54,"weather_code":113,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0001_sunny.png"],"weather_descriptions":["Sunny"],"wind_speed":7,"wind_degree":190,"wind_dir":"S","pressure":1016,"precip":0,"humidity":26,"cloudcover":0,"feelslike":54,"uv_index":4,"visibility":10,"is_day":"yes"},"forecast":{"2021-01-26":{"date":"2021-01-26","date_epoch":1611619200,"astro":{"sunrise":"06:54 AM","sunset":"05:19 PM","moonrise":"03:22 PM","moonset":"05:25 AM","moon_phase":"Full Moon","moon_illumination":90},"mintemp":45,"maxtemp":59,"avgtemp":52,"totalsnow":0,"sunhour":10.7,"uv_index":3,"hourly":[{"time":"0","temperature":46,"wind_speed":9,"wind_degree":305,"wind_dir":"NW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":47,"visibility":6,"pressure":1009,"cloudcover":7,"heatindex":46,"dewpoint":27,"windchill":43,"windgust":13,"feelslike":43,"chanceofrain":0,"chanceofremdry":85,"chanceofwindy":0,"chanceofovercast":43,"chanceofsunshine":84,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1},{"time":"300","temperature":46,"wind_speed":7,"wind_degree":306,"wind_dir":"NW","weather_code":113,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0008_clear_sky_night.png"],"weather_descriptions":["Clear"],"precip":0,"humidity":50,"visibility":6,"pressure":1010,"cloudcover":2,"heatindex":46,"dewpoint":28,"windchill":43,"windgust":9,"feelslike":43,"chanceofrain":0,"chanceofremdry":87,"chanceofwindy":0,"chanceofovercast":25,"chanceofsunshine":82,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1},{"time":"600","temperature":46,"wind_speed":6,"wind_degree":329,"wind_dir":"NNW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":50,"visibility":6,"pressure":1012,"cloudcover":1,"heatindex":46,"dewpoint":28,"windchill":43,"windgust":7,"feelslike":43,"chanceofrain":0,"chanceofremdry":89,"chanceofwindy":0,"chanceofovercast":11,"chanceofsunshine":86,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1},{"time":"900","temperature":48,"wind_speed":5,"wind_degree":340,"wind_dir":"NNW","weather_code":113,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0001_sunny.png"],"weather_descriptions":["Sunny"],"precip":0,"humidity":45,"visibility":6,"pressure":1015,"cloudcover":2,"heatindex":48,"dewpoint":27,"windchill":46,"windgust":6,"feelslike":46,"chanceofrain":0,"chanceofremdry":87,"chanceofwindy":0,"chanceofovercast":23,"chanceofsunshine":86,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":3},{"time":"1200","temperature":55,"wind_speed":4,"wind_degree":294,"wind_dir":"WNW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":33,"visibility":6,"pressure":1016,"cloudcover":1,"heatindex":55,"dewpoint":27,"windchill":55,"windgust":5,"feelslike":55,"chanceofrain":0,"chanceofremdry":91,"chanceofwindy":0,"chanceofovercast":12,"chanceofsunshine":87,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":4},{"time":"1500","temperature":57,"wind_speed":5,"wind_degree":221,"wind_dir":"SW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":31,"visibility":6,"pressure":1016,"cloudcover":3,"heatindex":57,"dewpoint":28,"windchill":57,"windgust":6,"feelslike":57,"chanceofrain":0,"chanceofremdry":86,"chanceofwindy":0,"chanceofovercast":35,"chanceofsunshine":78,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":4},{"time":"1800","temperature":54,"wind_speed":6,"wind_degree":204,"wind_dir":"SSW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":36,"visibility":6,"pressure":1017,"cloudcover":12,"heatindex":54,"dewpoint":28,"windchill":54,"windgust":6,"feelslike":54,"chanceofrain":0,"chanceofremdry":86,"chanceofwindy":0,"chanceofovercast":38,"chanceofsunshine":85,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1},{"time":"2100","temperature":52,"wind_speed":4,"wind_degree":159,"wind_dir":"SSE","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":40,"visibility":6,"pressure":1019,"cloudcover":36,"heatindex":52,"dewpoint":28,"windchill":50,"windgust":5,"feelslike":50,"chanceofrain":0,"chanceofremdry":87,"chanceofwindy":0,"chanceofovercast":40,"chanceofsunshine":80,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1}]}}}

question from:https://stackoverflow.com/questions/65909489/how-to-display-the-second-value-of-array-dynamically

Answer 1

Try this:

const obj = {"request":{"type":"Zipcode","query":"90210","language":"en","unit":"f"},"location":{"name":"Beverly Hills","country":"USA","region":"California","lat":"34.087","lon":"-118.412","timezone_id":"America/Los_Angeles","localtime":"2021-01-26 14:07","localtime_epoch":1611670020,"utc_offset":"-8.0"},"current":{"observation_time":"10:07 PM","temperature":54,"weather_code":113,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0001_sunny.png"],"weather_descriptions":["Sunny"],"wind_speed":7,"wind_degree":190,"wind_dir":"S","pressure":1016,"precip":0,"humidity":26,"cloudcover":0,"feelslike":54,"uv_index":4,"visibility":10,"is_day":"yes"},"forecast":{"2021-01-26":{"date":"2021-01-26","date_epoch":1611619200,"astro":{"sunrise":"06:54 AM","sunset":"05:19 PM","moonrise":"03:22 PM","moonset":"05:25 AM","moon_phase":"Full Moon","moon_illumination":90},"mintemp":45,"maxtemp":59,"avgtemp":52,"totalsnow":0,"sunhour":10.7,"uv_index":3,"hourly":[{"time":"0","temperature":46,"wind_speed":9,"wind_degree":305,"wind_dir":"NW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":47,"visibility":6,"pressure":1009,"cloudcover":7,"heatindex":46,"dewpoint":27,"windchill":43,"windgust":13,"feelslike":43,"chanceofrain":0,"chanceofremdry":85,"chanceofwindy":0,"chanceofovercast":43,"chanceofsunshine":84,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1},{"time":"300","temperature":46,"wind_speed":7,"wind_degree":306,"wind_dir":"NW","weather_code":113,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0008_clear_sky_night.png"],"weather_descriptions":["Clear"],"precip":0,"humidity":50,"visibility":6,"pressure":1010,"cloudcover":2,"heatindex":46,"dewpoint":28,"windchill":43,"windgust":9,"feelslike":43,"chanceofrain":0,"chanceofremdry":87,"chanceofwindy":0,"chanceofovercast":25,"chanceofsunshine":82,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1},{"time":"600","temperature":46,"wind_speed":6,"wind_degree":329,"wind_dir":"NNW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":50,"visibility":6,"pressure":1012,"cloudcover":1,"heatindex":46,"dewpoint":28,"windchill":43,"windgust":7,"feelslike":43,"chanceofrain":0,"chanceofremdry":89,"chanceofwindy":0,"chanceofovercast":11,"chanceofsunshine":86,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1},{"time":"900","temperature":48,"wind_speed":5,"wind_degree":340,"wind_dir":"NNW","weather_code":113,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0001_sunny.png"],"weather_descriptions":["Sunny"],"precip":0,"humidity":45,"visibility":6,"pressure":1015,"cloudcover":2,"heatindex":48,"dewpoint":27,"windchill":46,"windgust":6,"feelslike":46,"chanceofrain":0,"chanceofremdry":87,"chanceofwindy":0,"chanceofovercast":23,"chanceofsunshine":86,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":3},{"time":"1200","temperature":55,"wind_speed":4,"wind_degree":294,"wind_dir":"WNW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":33,"visibility":6,"pressure":1016,"cloudcover":1,"heatindex":55,"dewpoint":27,"windchill":55,"windgust":5,"feelslike":55,"chanceofrain":0,"chanceofremdry":91,"chanceofwindy":0,"chanceofovercast":12,"chanceofsunshine":87,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":4},{"time":"1500","temperature":57,"wind_speed":5,"wind_degree":221,"wind_dir":"SW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0002_sunny_intervals.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":31,"visibility":6,"pressure":1016,"cloudcover":3,"heatindex":57,"dewpoint":28,"windchill":57,"windgust":6,"feelslike":57,"chanceofrain":0,"chanceofremdry":86,"chanceofwindy":0,"chanceofovercast":35,"chanceofsunshine":78,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":4},{"time":"1800","temperature":54,"wind_speed":6,"wind_degree":204,"wind_dir":"SSW","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":36,"visibility":6,"pressure":1017,"cloudcover":12,"heatindex":54,"dewpoint":28,"windchill":54,"windgust":6,"feelslike":54,"chanceofrain":0,"chanceofremdry":86,"chanceofwindy":0,"chanceofovercast":38,"chanceofsunshine":85,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1},{"time":"2100","temperature":52,"wind_speed":4,"wind_degree":159,"wind_dir":"SSE","weather_code":116,"weather_icons":["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"],"weather_descriptions":["Partly cloudy"],"precip":0,"humidity":40,"visibility":6,"pressure":1019,"cloudcover":36,"heatindex":52,"dewpoint":28,"windchill":50,"windgust":5,"feelslike":50,"chanceofrain":0,"chanceofremdry":87,"chanceofwindy":0,"chanceofovercast":40,"chanceofsunshine":80,"chanceoffrost":0,"chanceofhightemp":0,"chanceoffog":0,"chanceofsnow":0,"chanceofthunder":0,"uv_index":1}]}}}

function getWeatherCode(obj) {
  let val;
  Object.keys(obj).forEach((e) => {
    if(e == 'forecast'){
      val = obj[e][formatDate()]['hourly'][1]['weather_code'];
    }
  });
  return val;
}

function formatDate() {
    var d = new Date('2021-01-26'),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) 
        month = '0' + month;
    if (day.length < 2) 
        day = '0' + day;

    return [year, month, day].join('-');
}

let a = getWeatherCode(obj);
console.log(a);