Sort JSON by specific value and group keys by sorted key if they have same value

Question

I want to sort my JSON by date, and if there are multiple entries for a specific date, group all of them into the specific date.

This is my 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"
   }
]

I want to order my JSON by date, and then have every match grouped by specific date and display them in HTML. So far, I'm displaying these 4 games, but I'm adding the date to every game; I would like to have the date, then the 2 games from 01-11-2019, again the date, 31-10-2019, then the rest of the 2 matches.

Here's the AJAX and 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));
}
});
}

Thanks for the help!

Answer 1

Actually what you want to do has to be done in two steps.

First, group your objects by date, you can do this with lodash, since it's already in your code.

With an ES6 approach, you could do this by defining the following function:

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

It takes two arguments: your array and the function that'll be used to verify on which property it should group your data.

matchMap = groupBy(foo, match => match.date)

You have plenty example avalaible on SO, i checked this post

Then you just have to sort the array by dates:

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])
})

since the date property is not a valid date but a string, you have to reconstruct it when comparing the different entries.

Then the result will be a dictionary with the date as key and ordered by it.

EDIT Fetching data:

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
  }

}

Hope it helps !