JSFiddle - React, Tailwind, and code Playground
by Mike Green
HTML
<table>
<thead id="headings">
<tr>
<th id="type">Type</th>
<th id="title">Title</th>
<th id="uploadDate">Uploaded</th>
</tr>
</thead>
<tbody id="results">
<!-- this will be auto-populated -->
</tbody>
</table>
JavaScript
var data = [
{
"id": "D74CC23A-D1E8-40E2-8D42-6BEFD3474042",
"type": "WCRT",
"title": "What You Got??",
"description": "Show us what'choo got.",
"broadcastDate": "2016-04-19T05:00:00Z",
"uploadDate": "2016-04-14T05:00:00Z",
"version": "AAAAAAAAUME="
},
{
"id": "F41ECAF8-F7D6-4435-BCAB-96F61D99EE04",
"type": "Squatch Watch",
"title": "Sasquatch",
"description": "Messin' with Sasquatch",
"broadcastDate": "2016-05-26T05:00:00Z",
"uploadDate": "2016-04-12T05:00:00Z",
"version": "AAAAAAAATvk="
},
{
"id": "228EFB28-2591-41F2-B6A3-5D21C4AF2530",
"type": "Welch's Grapevine",
"title": "I heard it through the grapvine",
"description": "Nearly lost my mind",
"broadcastDate": "2016-04-30T05:00:00Z",
"uploadDate": "2016-04-10T05:00:00Z",
"version": "AAAAAAAAUL0="
},
{
"id": "ACEAB51B-165E-4C5E-BCD0-77C8C4FA88E8",
"type": "WCRT",
"title": "What You Got",
"description": "Show us what'choo got.",
"broadcastDate": "2016-04-15T05:00:00Z",
"uploadDate": "2016-04-15T05:00:00Z",
"version": "AAAAAAAARNs="
}
];
function sortResults(prop, asc) {
data = data.sort(function(a, b) {
if (asc) return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0);
else return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0);
});
showResults();
}
function showResults () {
var html = '';
for (var e in data) {
html += '<tr>'
+'<td>'+data[e].type+'</td>'
+'<td>'+data[e].title+'</td>'
+'<td>'+data[e].uploadDate+'</td>'
+'</tr>';
}
$('#results').html(html);
}
sortResults('uploadDate', false);