JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

Each array sorted by term:<br><br>
<div id="results1"></div><br>
<hr>
Each array sorted by time:<br><br>
<div id="results2"></div><br>
<hr>
Each array sorted by rowId:<br><br>
<div id="results3"></div><br>

CSS

body {
    font-family: "Courier New";
    font-size: 12px;
}

JavaScript

var obj = {saved: [
    {"dict":"English","terms": [
        {"term":"car","rowId":"3487","time":"1384773838069"},
        {"term":"dog","rowId":"443","time":"1384776129957"},
        {"term":"plane","rowId":"16171","time":"1384776168253"},
        {"term":"bread","rowId":"127564","time":"1384959605196"}]
     }, 
     {"dict":"French","terms": [
         {"term":"Monsieur","rowId":"934","time":"1384862250130"},
         {"term":"Croissant","rowId":"13612","time":"1384900161187"},
         {"term":"suis","rowId":"942","time":"1384900437068"}]
      }
    ]
};

function sortArrayAlpha(arr, key) {
    arr.sort(function(a, b) {
        return a[key].localeCompare(b[key]);
    });
}

function sortArrayNum(arr, key) {
    arr.sort(function(a, b) {
        return parseInt(a[key], 10) - parseInt(b[key], 10);
    });
}

// make the output more readable in this jsFiddle
function output(id, data) {
    var pretty = JSON.stringify(data).replace(/\},/g, "},<br>").replace(/\[\{/g, "[<br>{").replace(/\{"term"/g, '&nbsp;&nbsp;&nbsp;&nbsp;{"term"');
    document.getElementById(id).innerHTML = pretty;
}

var dicts = obj.saved;
// sort by term
for (var i = 0; i < dicts.length; i++) {
    var terms = dicts[i].terms;
    sortArrayAlpha(terms, "term");
}
output("results1", obj);

// sort by time
for (var i = 0; i < dicts.length; i++) {
    var terms = dicts[i].terms;
    sortArrayNum(terms, "time");
}
output("results2", obj);

// sort by rowId (numerically)
for (var i = 0; i < dicts.length; i++) {
    var terms = dicts[i].terms;
    sortArrayNum(terms, "rowId");
}
output("results3", obj);