JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<span>Initial Array Data</span>
<div id="1"></div>
<hr/>
<span>Sorted Array Data</span>
<div id="2"></div>

JavaScript

function getObject(name,date,isComplete) {
 
    return {
     name: name,
        date: date,
        isComplete: isComplete
    }
}

var dataArray = [
    getObject('test5','10/01/2015',true),
    getObject('test3','10/31/2015',true),
    getObject('test2','10/18/2015',true),
    getObject('test1','10/11/2015',true),
    getObject('test4','10/02/2015',true),
    getObject('test7','',false),
    getObject('test9','',false),
    getObject('test6','',false),
    getObject('test8','',false)
    ];
displayArray(dataArray,1);

dataArray.sort(function(a, b) {
    //debugger;
    var aSort = convertObjectForSort(a);
    var bSort = convertObjectForSort(b);
    return aSort > bSort ? 1 : aSort < bSort ? -1 : 0;
});

displayArray(dataArray,2);

function convertObjectForSort(dataObject) {
    var returnValue = 0;
     var date = new Date(dataObject.date);
      var millisecondsSinceEpoch = date.getTime();
     returnValue = 
         dataObject.isComplete ?
				"a-"+millisecondsSinceEpoch : 
    			 0 + dataObject.name;
     return returnValue;
}

function displayArray(data,divId) {
 var container = document.getElementById(divId);  
     container.innerHTML = '';   
    
    for(var i = 0;i<data.length;i++)
    { 
        container.innerHTML += "<div>Name:"+data[i].name + " Date: " + data[i].date + "</div>";
    }
}