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'
}
]
>Solution :
Try the following
const getData = ({ dt, temp, weather: [{ description, icon }] }) => {
if(temp.day) temp = temp.day
return {dt, temp, description, icon};
}