Сортировать 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 игры, но я добавляю дату к каждой игре;Я хотел бы иметь дату, затем 2 игры от 01-11-2019, снова дату, 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, поскольку это уже есть в вашем коде.

Используя подход 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, я проверил этот пост

Тогда вам просто нужно отсортировать массив по датам:

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
  }

}

Надеюсь, это поможет!