按字母顺序对JSON表进行排序,并在第二级按值排序

时间:2013-11-21 18:44:12

标签: jquery json sorting

我想按字母顺序对jJSON表进行排序,并使用data.fuelState(float)的值在第二级进行排序。我设法按字母顺序排序(感谢stackoverflow :))..如何做到这一点?

<!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>

2 个答案:

答案 0 :(得分:1)

您只需在“==”案例中为主要排序参数添加辅助排序逻辑。

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);
}

答案 1 :(得分:0)

将您的JSON转换为JavaScript对象(JSON.parse):

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

然后使用数组原型排序对需要排序的任何字段进行排序。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort


看起来JQuery为你做了解析 - 我没注意到它最初是JQuery。我倾向于将$变量用于我自己的库。