CODEWITHSUNDEEP
javascriptarraysobject
Fernando Netto
Fernando Netto

Reputation: 65

Get values from an array of objects in JavaScript

I have this code and I'm trying to get some values to show into HTML. I need to get the following values of "current" object :

("dt":1643884851, "temp":8.11, "description":"few clouds" and "icon":"02d")

After this, I also need the values of each one of the 8 "daily" objects inside an array and I don't have more ideas and knowledge to do this.

const str = '{"lat":39.7436,"lon":-8.8071,"timezone":"Europe/Lisbon","timezone_offset":0,"current":{"dt":1643884851,"sunrise":1643874091,"sunset":1643910991,"temp":8.11,"feels_like":6.94,"pressure":1025,"humidity":87,"dew_point":6.08,"uvi":1.63,"clouds":20,"visibility":7000,"wind_speed":2.06,"wind_deg":160,"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}]},"daily":[{"dt":1643889600,"sunrise":1643874091,"sunset":1643910991,"moonrise":1643880300,"moonset":1643920800,"moon_phase":0.08,"temp":{"day":9.56,"min":8.11,"max":14.8,"night":10.29,"eve":11.42,"morn":8.61},"feels_like":{"day":9.15,"night":9.8,"eve":10.78,"morn":8.61},"pressure":1025,"humidity":81,"dew_point":6.47,"wind_speed":2.51,"wind_deg":279,"wind_gust":2.99,"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03d"}],"clouds":36,"pop":0,"uvi":2.12},{"dt":1643976000,"sunrise":1643960432,"sunset":1643997463,"moonrise":1643968320,"moonset":1644011220,"moon_phase":0.12,"temp":{"day":14.02,"min":9.3,"max":14.86,"night":9.66,"eve":11.67,"morn":9.3},"feels_like":{"day":13.17,"night":8.63,"eve":10.96,"morn":9.3},"pressure":1026,"humidity":65,"dew_point":7.18,"wind_speed":3.71,"wind_deg":335,"wind_gust":5.97,"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":100,"pop":0,"uvi":1.99},{"dt":1644062400,"sunrise":1644046772,"sunset":1644083936,"moonrise":1644056160,"moonset":1644101520,"moon_phase":0.15,"temp":{"day":14.98,"min":8.24,"max":16.46,"night":9.23,"eve":10.87,"morn":8.6},"feels_like":{"day":14.1,"night":8.89,"eve":10.23,"morn":8.6},"pressure":1026,"humidity":60,"dew_point":6.78,"wind_speed":2.88,"wind_deg":336,"wind_gust":4.08,"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"clouds":83,"pop":0,"uvi":2.57},{"dt":1644148800,"sunrise":1644133110,"sunset":1644170408,"moonrise":1644143940,"moonset":1644191700,"moon_phase":0.18,"temp":{"day":17.47,"min":8.59,"max":19.18,"night":11.06,"eve":13.31,"morn":8.59},"feels_like":{"day":16.4,"night":9.81,"eve":12.34,"morn":7.67},"pressure":1028,"humidity":43,"dew_point":4.4,"wind_speed":2.22,"wind_deg":18,"wind_gust":3.79,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":1,"pop":0,"uvi":2.62},{"dt":1644235200,"sunrise":1644219446,"sunset":1644256880,"moonrise":1644231840,"moonset":0,"moon_phase":0.22,"temp":{"day":18.22,"min":8.77,"max":19.22,"night":10.85,"eve":12.93,"morn":8.77},"feels_like":{"day":16.93,"night":9.3,"eve":11.56,"morn":7.52},"pressure":1028,"humidity":32,"dew_point":0.71,"wind_speed":3.49,"wind_deg":107,"wind_gust":5.75,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":3,"pop":0,"uvi":2.59},{"dt":1644321600,"sunrise":1644305782,"sunset":1644343352,"moonrise":1644319800,"moonset":1644281820,"moon_phase":0.25,"temp":{"day":17.33,"min":8.84,"max":18.69,"night":11.51,"eve":13.43,"morn":8.84},"feels_like":{"day":16.14,"night":10.26,"eve":12.32,"morn":7.32},"pressure":1026,"humidity":39,"dew_point":2.71,"wind_speed":2.68,"wind_deg":124,"wind_gust":6.18,"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"clouds":0,"pop":0,"uvi":3},{"dt":1644408000,"sunrise":1644392115,"sunset":1644429824,"moonrise":1644407940,"moonset":1644371940,"moon_phase":0.28,"temp":{"day":17.75,"min":10.34,"max":18.5,"night":14.17,"eve":15.25,"morn":10.34},"feels_like":{"day":16.7,"night":13.18,"eve":14.35,"morn":9.02},"pressure":1027,"humidity":43,"dew_point":4.69,"wind_speed":3.26,"wind_deg":133,"wind_gust":6.17,"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"clouds":88,"pop":0,"uvi":3},{"dt":1644494400,"sunrise":1644478447,"sunset":1644516296,"moonrise":1644496380,"moonset":1644461940,"moon_phase":0.31,"temp":{"day":16.66,"min":13.48,"max":16.84,"night":15.49,"eve":16.01,"morn":13.52},"feels_like":{"day":15.77,"night":14.82,"eve":15.31,"morn":12.49},"pressure":1026,"humidity":53,"dew_point":6.71,"wind_speed":5.27,"wind_deg":115,"wind_gust":10.08,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"clouds":100,"pop":0.36,"rain":0.43,"uvi":3}]}';
const obj = JSON.parse(str)
const getData = ({
  dt,
  temp,
  weather: [{
    description,
    icon
  }]
}) => {
  return {
    dt,
    temp,
    description,
    icon
  };
}
const {
  current,
  daily
} = obj;
const result = [getData(current)]
daily.forEach(obj => result.push(getData(obj)));
console.log(result)

And I have this:

[
  {
    dt: 1643884851,
    temp: 8.11,
    description: 'few clouds',
    icon: '02d'
  },
  {
    dt: 1643889600,
    temp: {
      day: 9.56,
      min: 8.11,
      max: 14.8,
      night: 10.29,
      eve: 11.42,
      morn: 8.61
    },
    description: 'scattered clouds',
    icon: '03d'
  },
  {
    dt: 1643976000,
    temp: {
      day: 14.02,
      min: 9.3,
      max: 14.86,
      night: 9.66,
      eve: 11.67,
      morn: 9.3
    },
    description: 'overcast clouds',
    icon: '04d'
  },
  {
    dt: 1644062400,
    temp: {
      day: 14.98,
      min: 8.24,
      max: 16.46,
      night: 9.23,
      eve: 10.87,
      morn: 8.6
    },
    description: 'broken clouds',
    icon: '04d'
  },
  {
    dt: 1644148800,
    temp: {
      day: 17.47,
      min: 8.59,
      max: 19.18,
      night: 11.06,
      eve: 13.31,
      morn: 8.59
    },
    description: 'clear sky',
    icon: '01d'
  },
  {
    dt: 1644235200,
    temp: {
      day: 18.22,
      min: 8.77,
      max: 19.22,
      night: 10.85,
      eve: 12.93,
      morn: 8.77
    },
    description: 'clear sky',
    icon: '01d'
  },
  {
    dt: 1644321600,
    temp: {
      day: 17.33,
      min: 8.84,
      max: 18.69,
      night: 11.51,
      eve: 13.43,
      morn: 8.84
    },
    description: 'clear sky',
    icon: '01d'
  },
  {
    dt: 1644408000,
    temp: {
      day: 17.75,
      min: 10.34,
      max: 18.5,
      night: 14.17,
      eve: 15.25,
      morn: 10.34
    },
    description: 'overcast clouds',
    icon: '04d'
  },
  {
    dt: 1644494400,
    temp: {
      day: 16.66,
      min: 13.48,
      max: 16.84,
      night: 15.49,
      eve: 16.01,
      morn: 13.52
    },
    description: 'light rain',
    icon: '10d'
  }
]

But instead of this return, I need this: Note that the first object comes from current and the other 8 objects, comes from daily

[
  {
    dt: 1643884851,
    temp: 8.11,
    description: 'few clouds',
    icon: '02d'
  },
  {
    dt: 1643889600,
    day: 9.56,
    description: 'scattered clouds',
    icon: '03d'
  },
  {
    dt: 1643976000,
    day: 14.02,
    description: 'overcast clouds',
    icon: '04d'
  },
  {
    dt: 1644062400,
    day: 14.98,
    description: 'broken clouds',
    icon: '04d'
  },
  {
    dt: 1644148800,
    day: 17.47,
    description: 'clear sky',
    icon: '01d'
  },
  {
    dt: 1644235200,
    day: 18.22,
    description: 'clear sky',
    icon: '01d'
  },
  {
    dt: 1644321600,
    day: 17.33,
    description: 'clear sky',
    icon: '01d'
  },
  {
    dt: 1644408000,
    day: 17.75,
    description: 'overcast clouds',
    icon: '04d'
  },
  {
    dt: 1644494400,
    day: 16.66,
    description: 'light rain',
    icon: '10d'
  }
]

Upvotes: 0

Views: 175

Answers (1)

Kenny.Harrer
Kenny.Harrer

Reputation: 76

Try the following

const getData = ({ dt, temp, weather: [{ description, icon }] }) => {
    if(temp.day) temp = temp.day
    return {dt, temp, description, icon};
}

Upvotes: 1

Related Questions