javascript - 按特定值对 JSON 进行排序，如果它们具有相同的值，则按排序键对它们进行分组

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 月 1 日的 2 场比赛，再次是日期 2019 年 10 月 31 日，然后是剩下的 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 执行此操作，因为它已经在您的代码中。

使用 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
  }

}

希望对你有帮助!