Ordinamento di JSON in base ai valori

Ho un object JSON molto semplice come il seguente:

{ "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" } ] } 

Ora che questo viene restituito dal mio codice lato server, jQuery.each per formare l’html necessario e produrre il risultato.

In questo momento quello che sto facendo è inviare una chiamata AJAX al server che contiene le mie informazioni di ordinamento … ad esempio “Titolo DESC” e rieseguire una query SQL per restituire il nuovo set di risultati. Ma voglio evitare questo e utilizzare jQuery per ordinare il JSON risultante per impedire round trip al server e accesso a più database.

Come posso ottenere ciò usando jQuery?

Prova questo per eleganza ed efficienza.

jQuery va bene, ma non è l’ideale per l’ordinamento qui, a meno che non si abbia a portata di mano l’array originale. Basta scrivere una funzione che prende il nome della proprietà come stringa e l’ordine (crescente o decrescente) come booleano, scrive una semplice funzione di confronto e usa la funzione nativa js sort (). In questo modo non devi scrivere una funzione di ordinamento separata per ogni proprietà:

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

Poi:

 sortResults('l_name', true); 

Gioca con un esempio funzionante qui .

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

Passa con successo i valori uguali (mantenere lo stesso ordine). Flessibile: gestire ascendente (123) o discendente (321), funziona per numeri, lettere e unicodi. Funziona su tutti i dispositivi testati (Chrome, browser predefinito Android, FF).

Dati forniti tali :

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

Ordinamento in ordine crescente o inverso :

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

Se non ti dispiace usare una libreria esterna, Lodash ha molte utility meravigliose

 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") 

Puoi anche ordinare per più proprietà. Ecco un cesto che lo mostra in azione

Soluzione che funziona con diversi tipi e con casi superiori e inferiori.
Ad esempio, senza l’istruzione toLowerCase , “Goodyear” verrà prima di “doe” con un ordinamento crescente. Esegui lo snippet di codice nella parte inferiore della mia risposta per visualizzare i diversi comportamenti.

DATI JSON:

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

Funzione di ordinamento JSON:

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

Uso:

 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

Ecco un metodo di ordinamento a più livelli. Includo uno snippet da un modulo JS Angular, ma puoi ottenere lo stesso risultato esaminando gli oggetti keys di ordinamento in modo tale che la funzione di ordinamento possa accedervi. Puoi vedere il modulo completo su Plunker .

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