我想按日期对 JSON 进行排序,如果特定日期有多个条目,请将所有条目分组到特定日期中。
这是我的 JSON:
[
{
"id":"3",
"time":"20:00",
"hometeam":"AC Milan",
"awayteam":"Juventus",
"prediction":"Under 2.5",
"odds":"1.75",
"competition":"Serie A",
"status":"lost",
"date":"01-11-2019"
},
{
"id":"4",
"time":"21:00",
"hometeam":"FCSB",
"awayteam":"Dinamo",
"prediction":"Draw",
"odds":"1.12",
"competition":"Liga 1",
"status":"",
"date":"01-11-2019"
},
{
"id":"1",
"time":"16:00",
"hometeam":"Chelsea",
"awayteam":"Arsenal",
"prediction":"Over 2.5",
"odds":"1.32",
"competition":"Premier League",
"status":"won",
"date":"31-10-2019"
},
{
"id":"2",
"time":"18:00",
"hometeam":"Manchester United",
"awayteam":"Liverpool",
"prediction":"1x2",
"odds":"1.45",
"competition":"Premier League",
"status":"won",
"date":"31-10-2019"
}
]
这是 AJAX 和 HTML:
function updateList() {
jQuery.ajax({
type: "GET",
url: url
dataType: 'json',
timeout: 5000,
crossDomain: true,
cache: false,
success: function(data) {
console.log(JSON.stringify(data));
var groupedData = _.groupBy(data, function(d){return d.date});
//console.log(groupedData);
var htmlText = data.map(function(o){
return `
<div class="norm"><i class="icon-hourglass-time"></i>${o.date}</div>
<ul class="stage clearfix">
<li class="scene">
<!-- <div class="trigger"></div> -->
<div class="face" ontouchend="return true">
<a class="calendar-hour poster tasklist-gray">
<div class="max-constrain">
<div class="first-20">
<div class="cal-from"><strong>${o.time} <small>GMT</small></strong>
</div>
</div>
<div class="second-45">
<div class="teams">${o.hometeam}
<br><small>vs</small>
<br>${o.awayteam}</div><em><i class="fa fa-map-marker"></i>${o.competition}</em>
</div>
<div class="third-35 last-column">
<div class="over-under">
<div class="over-under-icon">
<div class="over-under-text-over uppercase">
<div class="over-under-number">${o.prediction}</div>
<div class="odd-number">
${o.odds}
</div>
</div>
<div class="touch-section uppercase"><span class="statusValue">${o.status}</span></div>
</div>
</div>
</div>
</div>
</a>
<div class="info">
<div class="result-top-unch uppercase"><i class="fa fa-pause"></i>…</div>
</div>
</div>
</li>
</ul>
`;
});
jQuery('.container-fullscreen').append(htmlText);
},
error: function(data) {
console.log(JSON.stringify(data));
}
});
}
感谢您的帮助!
最佳答案
实际上你想做的事情必须分两步完成。
首先,按日期对对象进行分组,您可以使用 lodash 执行此操作,因为它已经在您的代码中。
使用 ES6 方法,您可以通过定义以下函数来实现此目的:
function groupBy(list, keyGetter) {
const map = new Map();
list.forEach((item) => {
const key = keyGetter(item);
const collection = map.get(key);
if (!collection) {
map.set(key, [item]);
} else {
collection.push(item);
}
});
return map;
}
它需要两个参数:您的数组和用于验证应根据哪个属性对数据进行分组的函数。
matchMap = groupBy(foo, match => match.date)
你有很多可用的例子,我检查了 this post
然后你只需按日期对数组进行排序:
let matchArray = Array.from(matchMap )
const sortedArray = matchArray.sort( (a, b) => {
const dateArrayA = a[1][0].date.split('-');
const dateArrayB = b[1][0].date.split('-');
return new Date(dateArrayA[2], dateArrayA[1]-1, dateArrayA[0]) > new Date(dateArrayB[2], dateArrayB[1]-1, dateArrayB[0])
})
由于 date
属性不是有效日期而是字符串,因此在比较不同条目时必须重建它。
然后结果将是一个以日期为键并按日期排序的字典。
编辑 获取数据:
for(i=0;i<matchArray.length;i++)
{
for(j=0;j<matchArray[i][1].length;j++){
const currentMatch = matchArray[i][1][j];
//Your display logic
}
}
希望对你有帮助!
关于javascript - 按特定值对 JSON 进行排序,如果它们具有相同的值,则按排序键对它们进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58685354/