簡體   English   中英

如何使用 Javascript 根據日期值過濾 JSON 數據

[英]How to filter JSON data based on date value using Javascript

我有以下 JSON 數據,我想根據特定值進行過濾。 我的目標是根據日期(總是不同的)獲取最小值、最大值和圖標數據。

{
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"
}
]

如何根據dt值過濾最小值最大值並將其顯示在我的 div 元素中:

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

那是 javascript object,而不是 JSON。

如果 object 的屬性始終相同,則可以檢查其嵌套值。

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

編輯在看到你從哪里檢索 JSON Object 之后,你將不得不得到數組

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

您將像這樣檢索嵌套的 object

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

試試下面的代碼:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM