JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

To sort or not to sort, that is the question.
<h3>By price asc</h3>
<ul id="u1" style="margin-bottom: 20px;"></ul>
<h3>By city desc</h3>
<ul id="u2"></ul>

JavaScript

//from the second answer on this stackoverflow post
//http://stackoverflow.com/questions/979256/how-to-sort-an-array-of-javascript-objects

var homes = [{
   "h_id": "3",
   "city": "Dallas",
   "state": "TX",
   "zip": "75201",
   "price": "162500"
}, {
   "h_id": "4",
   "city": "Bevery Hills",
   "state": "CA",
   "zip": "90210",
   "price": "319250"
}, {
   "h_id": "5",
   "city": "New York",
   "state": "NY",
   "zip": "00010",
   "price": "962500"
}];

var sort_by = function(field, reverse, primer){
   var key = function (x) {return primer ? primer(x[field]) : x[field]};

   return function (a,b) {
	  var A = key(a), B = key(b);
	  return ( (A < B) ? -1 : ((A > B) ? 1 : 0) ) * [-1,1][+!!reverse];                  
   }
}

// Sort by price high to low
homes.sort(sort_by('price', true, parseInt));
var u1 = document.getElementById('u1');
for (var i=0; i<homes.length; i++) {
	u1.innerHTML += '<li>- '+homes[i].price+', '+homes[i].city+'</li>';
}

// Sort by city, case-insensitive, A-Z
homes.sort(sort_by('city', false, function(a){return a.toUpperCase()}));	
var u2 = document.getElementById('u2');
for (i=0; i<homes.length; i++) {
	u2.innerHTML += '<li>- '+homes[i].city+', '+homes[i].price+'</li>';
}