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>

that JSON is not valid, please fix it to be a valid JSON or a JS object — Maher Fattouh
– Maher Fattouh, Commented Jun 24, 2020 at 15:15
I am fetching data from OpenWeatherMap API. Example like this one:samples.openweathermap.org/data/2.5/forecast/… — Marko
– Marko, Commented Jun 24, 2020 at 15:21

mcarn · Accepted Answer · 2020-06-24 15:25:34Z

2

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")

edited Jun 24, 2020 at 15:25

answered Jun 24, 2020 at 15:13

mcarn

766 bronze badges

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

2 Comments

Marko Over a year ago

Thank you, your response is very helpful. But fetched obj.dt value will always be different. I could never predict it's value.

mcarn Over a year ago

In the API Docs yo ucan see the following: dt Time of data calculation, unix, UTC. The date is always the "same". Only the day/month/year changes

Kishan · Accepted Answer · 2020-06-24 16:48:49Z

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

Thank you! This is doing it's thing. Could I get some explanation, I really want to learn this?
The code is very easy to understand if you know Javascript. I have used Filter() method, refer: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

How to filter JSON data based on date value using Javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related