JSON nach Werten sortieren

Ich habe ein sehr einfaches JSON-Objekt wie das Folgende:

{ "people":[ { "f_name":"john", "l_name":"doe", "sequence":"0", "title":"president", "url":"google.com", "color":"333333" }, { "f_name":"michael", "l_name":"goodyear", "sequence":"0", "title":"general manager", "url":"google.com", "color":"333333" } ] } 

Jetzt, da dies von meinem serverseitigen Code zurückgegeben wird, jQuery.each ich jQuery.each , um den notwendigen HTML-Code zu jQuery.each und das Ergebnis auszugeben.

Im Moment sende ich einen AJAX-Aufruf an den Server, der meine Sortierinformationen enthält … zB “Title DESC” und führe eine SQL-Abfrage erneut aus, um die neue Ergebnismenge zurückzugeben. Aber ich möchte dies vermeiden und jQuery verwenden, um den resultierenden JSON zu sortieren, um Rundreisen zum Server und den Zugriff auf mehrere databaseen zu verhindern.

Wie kann ich dies mit jQuery erreichen?

Probieren Sie dies für Eleganz und Effizienz.

jQuery ist in Ordnung, aber es ist nicht ideal zum Sortieren hier, es sei denn, Sie haben das Original-Array nicht griffbereit. Schreiben Sie einfach eine function, die den Eigenschaftsnamen als String und die Reihenfolge (aufsteigend oder absteigend) als booleschen Wert annimmt, schreiben Sie eine einfache Vergleichsfunktion und verwenden Sie die native function jsort (). Auf diese Weise müssen Sie keine separate Sortierfunktion für jede Eigenschaft schreiben:

 var people = [ { "f_name": "john", "l_name": "doe", "sequence": "0", "title" : "president", "url" : "google.com", "color" : "333333", } // etc ]; function sortResults(prop, asc) { people = people.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(); } 

Dann:

 sortResults('l_name', true); 

Spielen Sie mit einem Arbeitsbeispiel hier .

Demo: http://jsfiddle.net/VAKrE/1019/

Erfolgreich gleiche Werte übergeben (gleiche Reihenfolge beibehalten). Flexibel: Griff Aszendent (123) oder Nachfahren (321), funktioniert für Zahlen, Buchstaben und Unicodes. functioniert auf allen getesteten Geräten (Chrome, Android Standard-Browser, FF).

Gegebene Daten wie :

 var people = [ { 'myKey': 'A', 'status': 0 }, { 'myKey': 'B', 'status': 3 }, { 'myKey': 'C', 'status': 3 }, { 'myKey': 'D', 'status': 2 }, { 'myKey': 'E', 'status': 7 }, ... ]; 

Sortierung in aufsteigender oder umgekehrter Reihenfolge :

 function sortJSON(data, key, way) { return data.sort(function(a, b) { var x = a[key]; var y = b[key]; if (way === '123' ) { return ((x < y) ? -1 : ((x > y) ? 1 : 0)); } if (way === '321') { return ((x > y) ? -1 : ((x < y) ? 1 : 0)); } }); } people2 = sortJSON(people,'status', '321'); // 123 or 321 alert("2. After processing (0 to x if 123; x to 0 if 321): "+JSON.stringify(people2)); 
 jQuery.fn.sort = function() { return this.pushStack( [].sort.apply( this, arguments ), []); }; function sortLastName(a,b){ if (a.l_name == b.l_name){ return 0; } return a.l_name> b.l_name ? 1 : -1; }; function sortLastNameDesc(a,b){ return sortLastName(a,b) * -1; }; var people= [ { "f_name": "john", "l_name": "doe", "sequence": "0", "title" : "president", "url" : "google.com", "color" : "333333", }, { "f_name": "michael", "l_name": "goodyear", "sequence": "0", "title" : "general manager", "url" : "google.com", "color" : "333333", }] sorted=$(people).sort(sortLastNameDesc); 

Wenn es Ihnen nichts ausmacht, eine externe Bibliothek zu benutzen, hat Lodash viele wunderbare Hilfsprogramme

 var people = [ { "f_name":"john", "l_name":"doe", "sequence":"0", "title":"president", "url":"google.com", "color":"333333" }, { "f_name":"michael", "l_name":"goodyear", "sequence":"0", "title":"general manager", "url":"google.com", "color":"333333" } ]; var sorted = _.sortBy(people, "l_name") 

Sie können auch nach mehreren Eigenschaften sortieren. Hier ist ein Plunk, der es in Aktion zeigt

Lösung, die mit verschiedenen Arten und mit oberen und unteren Fällen arbeitet.
Zum Beispiel wird “Goodyear” ohne die toLowerCase statement vor “doe” mit einer aufsteigenden Sortierung kommen. Führen Sie das Code-Snippet am Ende meiner Antwort aus, um die verschiedenen Verhaltensweisen anzuzeigen.

JSON-Daten:

 var people = [ { "f_name" : "john", "l_name" : "doe", // lower case "sequence": 0 // int }, { "f_name" : "michael", "l_name" : "Goodyear", // upper case "sequence" : 1 // int }]; 

JSON Sortierfunktion:

 function sortJson(element, prop, propType, asc) { switch (propType) { case "int": element = element.sort(function (a, b) { if (asc) { return (parseInt(a[prop]) > parseInt(b[prop])) ? 1 : ((parseInt(a[prop]) < parseInt(b[prop])) ? -1 : 0); } else { return (parseInt(b[prop]) > parseInt(a[prop])) ? 1 : ((parseInt(b[prop]) < parseInt(a[prop])) ? -1 : 0); } }); break; default: element = element.sort(function (a, b) { if (asc) { return (a[prop].toLowerCase() > b[prop].toLowerCase()) ? 1 : ((a[prop].toLowerCase() < b[prop].toLowerCase()) ? -1 : 0); } else { return (b[prop].toLowerCase() > a[prop].toLowerCase()) ? 1 : ((b[prop].toLowerCase() < a[prop].toLowerCase()) ? -1 : 0); } }); } } 

Verwendung:

 sortJson(people , "l_name", "string", true); sortJson(people , "sequence", "int", true); 
 var people = [{ "f_name": "john", "l_name": "doe", "sequence": 0 }, { "f_name": "michael", "l_name": "Goodyear", "sequence": 1 }, { "f_name": "bill", "l_name": "Johnson", "sequence": 4 }, { "f_name": "will", "l_name": "malone", "sequence": 2 }, { "f_name": "tim", "l_name": "Allen", "sequence": 3 }]; function sortJsonLcase(element, prop, asc) { element = element.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); } }); } function sortJson(element, prop, propType, asc) { switch (propType) { case "int": element = element.sort(function(a, b) { if (asc) { return (parseInt(a[prop]) > parseInt(b[prop])) ? 1 : ((parseInt(a[prop]) < parseInt(b[prop])) ? -1 : 0); } else { return (parseInt(b[prop]) > parseInt(a[prop])) ? 1 : ((parseInt(b[prop]) < parseInt(a[prop])) ? -1 : 0); } }); break; default: element = element.sort(function(a, b) { if (asc) { return (a[prop].toLowerCase() > b[prop].toLowerCase()) ? 1 : ((a[prop].toLowerCase() < b[prop].toLowerCase()) ? -1 : 0); } else { return (b[prop].toLowerCase() > a[prop].toLowerCase()) ? 1 : ((b[prop].toLowerCase() < a[prop].toLowerCase()) ? -1 : 0); } }); } } function sortJsonString() { sortJson(people, 'l_name', 'string', $("#chkAscString").prop("checked")); display(); } function sortJsonInt() { sortJson(people, 'sequence', 'int', $("#chkAscInt").prop("checked")); display(); } function sortJsonUL() { sortJsonLcase(people, 'l_name', $('#chkAsc').prop('checked')); display(); } function display() { $("#data").empty(); $(people).each(function() { $("#data").append("
" + this.l_name + "
" + this.f_name + "
" + this.sequence + "

"); }); }

 body { font-family: Arial; } .people { display: inline-block; width: 100px; border: 1px dotted black; padding: 5px; margin: 5px; } .buttons { border: 1px solid black; padding: 5px; margin: 5px; float: left; width: 20%; } ul { margin: 5px 0px; } 
  
Sort the JSON array with toLowerCase:
  • Type: string
  • Property: lastname
Asc Sort
Sort the JSON array without toLowerCase:
  • Type: string
  • Property: lastname
Asc Sort
Sort the JSON array:
  • Type: int
  • Property: sequence
Asc Sort


Data

Hier sehen Sie eine Sortiermethode auf mehreren Ebenen. Ich schließe ein Snippet aus einem Angular JS-Modul ein, aber Sie können dasselbe erreichen, indem Sie die Sortierschlüsselobjekte so definieren, dass Ihre Sortierfunktion darauf zugreifen kann. Sie können das vollständige Modul bei Plunker sehen .

 $scope.sortMyData = function (a, b) { var retVal = 0, key; for (var i = 0; i < $scope.sortKeys.length; i++) { if (retVal !== 0) { break; } else { key = $scope.sortKeys[i]; if ('asc' === key.direction) { retVal = (a[key.field] < b[key.field]) ? -1 : (a[key.field] > b[key.field]) ? 1 : 0; } else { retVal = (a[key.field] < b[key.field]) ? 1 : (a[key.field] > b[key.field]) ? -1 : 0; } } } return retVal; };