user2718017 user2718017 - 1 month ago 8
JSON Question

Sort JSON table alphabetically and by value on a second level

I want to sort the jJSON table alphabetically AND on a second level by the value of data.fuelState (float). I managed to get the alphabetically sorting done (thanks stackoverflow :)) .. How has this to be done?

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<table class="table table-condensed" border="1" id="usertable"></table>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<script src="js/bootstrap.min.js"></script>
<div class="alert alert-success">
<a href="#" class="alert-link">Die Übersicht zu Drive-Now München lädt... Bitte einen Moment Geduld!</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
function callJSON() {
setTimeout(function () {
$.getJSON('./url.php', function(data) {
$ ("#usertable").empty();
var cars = data.rec.vehicles.vehicles;
cars.sort(function(el1,el2){ return el1.model == el2.model ? 0 : (el1.model < el2.model ? -1 : 1); });
/*cars.sort(function(a,b) {
return parseFloat(b.fuelState) - parseFloat(a.fuelState);
});*/
$.each(cars, function(key, data){
/* var directionsService = new google.maps.DirectionsService();
var Anfang = new google.maps.LatLng(48.158572777778, 11.581866944444);
var Ende = new google.maps.LatLng(data.position.latitude, data.position.longitude);
var request = {
origin: Anfang,
destination: Ende,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
var def = $.Deferred();

var dur = 's';

directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
dur = response.routes[0].legs[0].duration.text;
console.log(dur);
}
def.resolve();
});

console.log(dur);*/
var laenge=cars.length;
var vint=data.vin;
var coopers="";
var tanken="";
var drive="MAN";
var fuelfarbe="#01DF3A";
var prozent="%";
var kosten=" 31 Cent/Min "
var tanksymbol="glyphicon-tint";
var farbe="success";
var flugbadge="";
var ortbadge="glyphicon-map-marker";
var v=vint.substring(3,7);
if(v=="SX31"){coopers=" S";}
if(v=="SW71"){coopers=" SD";}
if(data.model=="BMW ActiveE "){tanksymbol="glyphicon-flash";}
if(data.model=="BMW X1 "){kosten=" 34 Cent/Min ";}
if(data.auto=="Y"){drive="AUT";}
if((48.347910654607695 < data.position.latitude && data.position.latitude < 48.35988839686733)&&(11.781678199768066 < data.position.longitude && data.position.longitude < 11.792492866516113)){flugbadge="<span class='badge'>+12€</span>"; ortbadge="glyphicon-plane";}
if(data.fuelState<=25){tanken="20 Freiminuten für Vollbetankung"; farbe="warning";}
$('#usertable').append(
function() {
return "<tr class="+farbe+">"+
"<td>"+data.model+coopers+"</td>"+
"<td><span class='glyphicon glyphicon-user'></span> "+data.carName+"</td>"+
//"<td><span class='glyphicon glyphicon-time'></span> "+dur+"</td>"+
"<td>"+drive+"</td>"+
"<td><span class='glyphicon "+tanksymbol+"'></span>" +data.fuelState+"</td>"+
"<td>"+data.licensePlate+"</td>"+
"<td><span class='glyphicon "+ortbadge+"'></span> "+data.address+"</td>"+
"<td><span class='glyphicon glyphicon-euro'></span>"+kosten+flugbadge+"</td>"+
"<td>"+laenge+"</td>"+
"<td><a href='https://de.drive-now.com/php/metropolis/vehicle_details?vin="+ data.vin +"'target='_blank'><button class='btn btn-success btn-xs' type='button'>Reservieren</button></a></td>"+

//"<td><img src='"+data.model+"1.png'/></td>"+
"<tr>";
}
);
})
}).always(callJSON);
}, 2000);
}
$(callJSON);
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', '..', '..');
ga('send', 'pageview');

</script>
</body>
</html>

Answer

You just add your secondary sorting logic inside of the "==" case for your primary sorting parameter.

var lst = [
    {a:"abc", b:{c:1.5}},
    {a:"abcd", b:{c:1.4}},
    {a:"abcd", b:{c:1.6}},
    {a:"abc", b:{c:1.3}}
];
lst.sort(function(x, y) {
    if(x.a == y.a) {
        if(x.b.c == y.b.c) {
            return 0;
        } else if(x.b.c < y.b.c) {
            return -1;
        } else {
            return 1;
        }
    } else if(x.a < y.a) {
        return -1;
    } else {
        return 1;
    }
});
for(var k in lst) {
    console.log(lst[k].a + " " + lst[k].b.c);
}