Question

我想按日期对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"
   }
]

我想按日期排序JSON，然后将每个匹配项按特定日期分组并以HTML显示。到目前为止，我正在显示这4个游戏，但是我要在每个游戏中添加日期。我想要日期，然后是2019年11月11日的2场比赛，再次是日期31-10-2019，然后是2场比赛的其余部分。

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

感谢您的帮助！

Answer 1

实际上，您想要做的事情必须分两个步骤完成。

首先，按日期对对象进行分组，因为lodash已存在于代码中，所以可以使用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)

您在SO上有很多可用的示例，我检查了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
  }

}

希望有帮助！

如果JSON值相同，则按特定值对JSON进行排序，按排序键对组密钥进行排序

1 个答案: