JSFiddle - React, Tailwind, and code Playground

by tusika_

HTML

<div id="menu">
  <button id="byName" class="active">Player Name</button><button id="byCountry">Country</button><button id="byScore">Score</button></div>
    <div id="list"></div>

JavaScript

$(document).ready(function() {
  $.getJSON("players.json", function (data) {
    $.each(data.player, function() {
       $("#list").append("<div class='player'><ul><li>"+this['name']+"</li><li>"+this['country']+"</li><li>"+this['score']+"</li></ul></div>");
    });
    
    $("#byCountry").click(function() {
        var array = [];
        $.each(data.player, function(key, value) {
        array.push(key, value);
        array.sort(compare);
        console.log(array);
      });
    });
});


function compare(a,b) {
  if (a.country < b.country)
     return -1;
  if (a.country > b.country)
    return 1;
  return 0;
};