How to filter JSON data based on date value using Javascript

Question

I have the following JSON data that I want to filter based on certain value. My goal is to take min, max and icon data based on date (which is always different).

{
dt: 1592992800,
sunrise: 1592967182,
sunset: 1593023285,
temp: {
day: 24,
min: 18.46,
max: 24.14,
night: 18.46,
eve: 24.14,
morn: 24
},
weather: [
{
id: 500,
main: "Rain",
description: "light rain",
icon: "10d"
}
],
{
dt: 1593079200,
sunrise: 1593053602,
sunset: 1593109688,
temp: {
day: 25.46,
min: 15.65,
max: 27.63,
night: 21.54,
eve: 27.63,
morn: 15.65
},
weather: [
{
id: 800,
main: "Clear",
description: "sky is clear",
icon: "01d"
}
]

How can I filter min and max value based on dt value and display it in my div element:

<div class="today">
 <div class="min">
   <p class="temp_min" id="todaymin">↓17°C</p>
 </div>
 <div class="max">
   <p class="temp_max" id="todaymax">↑22°C</p>
 </div>
</div>

Answer 1

Thats a javascript object, not a JSON.

If the attributes from the object are always the same, you can check its nested values.

obj.temp.min
obj.tem.max
obj.dt

EDITED After seeing where you are retrieving the JSON Object from, you will have to get the array

{
    "city": {
        "id": 6940463,
        "name": "Altstadt",
        "coord": {
            "lon": 11.5752,
            "lat": 48.137
        },
        "country": "DE",
        "population": 0
    },
    "cod": "200",
    "message": 0.1094425,
    "cnt": 7,
    "list":[]
}

And you will retrieve the nested object like this

const finalObj=response.data.list.filter(obj => obj.dt === "The dt you want")

Answer 2

Try the following code:

 // jsonStr gets result from https://samples.openweathermap.org/data/2.5/forecast/daily?q=Belgrade,rs&appid=439d4b804bc8187953eb36d2a8c26a02 let jsonStr = '{"city":{"id":6940463,"name":"Altstadt","coord":{"lon":11.5752,"lat":48.137},"country":"DE","population":0},"cod":"200","message":0.1094425,"cnt":7,"list":[{"dt":1487242800,"temp":{"day":286.67,"min":272.78,"max":286.67,"night":273.34,"eve":277.05,"morn":281.56},"pressure":972.73,"humidity":75,"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01d"}],"speed":1.81,"deg":248,"clouds":0},{"dt":1487329200,"temp":{"day":278.25,"min":275.04,"max":278.25,"night":275.04,"eve":275.64,"morn":276.48},"pressure":966.98,"humidity":95,"weather":[{"id":600,"main":"Snow","description":"light snow","icon":"13d"}],"speed":3.17,"deg":262,"clouds":92,"rain":11.74,"snow":0.31},{"dt":1487415600,"temp":{"day":277.93,"min":269.55,"max":278.37,"night":269.55,"eve":273.8,"morn":274.56},"pressure":966.06,"humidity":95,"weather":[{"id":600,"main":"Snow","description":"light snow","icon":"13d"}],"speed":0.86,"deg":244,"clouds":8,"snow":0.09},{"dt":1487502000,"temp":{"day":276.41,"min":267.97,"max":276.41,"night":269.77,"eve":273.57,"morn":267.97},"pressure":933.27,"humidity":0,"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01d"}],"speed":1.57,"deg":142,"clouds":74},{"dt":1487588400,"temp":{"day":276.28,"min":271.12,"max":276.28,"night":273.12,"eve":274.52,"morn":271.12},"pressure":938.21,"humidity":0,"weather":[{"id":600,"main":"Snow","description":"light snow","icon":"13d"}],"speed":1.79,"deg":248,"clouds":88,"rain":0.93,"snow":0.38},{"dt":1487674800,"temp":{"day":278.1,"min":271.73,"max":278.1,"night":272.55,"eve":274.01,"morn":271.73},"pressure":945.82,"humidity":0,"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01d"}],"speed":2.19,"deg":262,"clouds":25,"snow":0.01},{"dt":1487761200,"temp":{"day":281.76,"min":273.21,"max":281.76,"night":278.88,"eve":279.22,"morn":273.21},"pressure":945.21,"humidity":0,"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"speed":2.98,"deg":272,"clouds":65,"rain":1.48}]}'; let obj = JSON.parse(jsonStr); var myDate = '2/16/2017'; // change it in m/d/yyyy format let filteredResult = obj.list.filter( item => new Date( item.dt *1000 ).toLocaleDateString() === myDate ); if(filteredResult && filteredResult.length) { console.log('Max: ' + filteredResult[0].temp.max); console.log('Min: ' + filteredResult[0].temp.min); console.log('Filtered Result: ', filteredResult); }