Сортировка JSON по значениям

У меня очень простой объект JSON, например:

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

Теперь, когда это возвращается из моего кода на стороне сервера, я запускаю jQuery.each для формирования необходимого html и вывода результата.

Сейчас я отправляю вызов AJAX на сервер, содержащий мою информацию о сортировке … например, «Title DESC» и повторно запускает SQL-запрос для возврата нового набора результатов. Но я хочу избежать этого и использовать jQuery для сортировки результирующего JSON для предотвращения круговых поездок на сервер и доступа к нескольким базам данных.

Как я могу достичь этого, используя jQuery?

Попробуйте это для элегантности и эффективности.

jQuery в порядке, но он не идеален для сортировки здесь, если у вас нет оригинального массива. Просто напишите функцию, которая берет имя свойства как строку и порядок (восходящий или нисходящий) как логическое, записывает простую функцию сравнения и использует собственную функцию sort () js. Таким образом, вам не нужно писать отдельную функцию сортировки для каждого свойства:

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

Затем:

 sortResults('l_name', true); 

Играйте с рабочим примером здесь .

Демо: http://jsfiddle.net/VAKrE/1019/

Успешно передать равные значения (сохранить одинаковый порядок). Гибкий: обрабатывать восходящий stream (123) или потомок (321), работает для чисел, букв и юникодов. Работает на всех проверенных устройствах (Chrome, браузер по умолчанию для Android, FF).

Данные такие :

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

Сортировка по возрастанию или обратному порядку :

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

Если вы не против использования внешней библиотеки, у Lodash есть много замечательных утилит

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

Вы также можете сортировать по нескольким свойствам. Вот fragment, показывающий его в действии

Решение работает с различными типами и с верхним и нижним случаем.
Например, без инструкции toLowerCase , «Goodyear» появится перед «doe» с восходящей сортировкой. Запустите fragment кода в нижней части моего ответа, чтобы просмотреть различные варианты поведения.

JSON DATA:

 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:

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

Применение:

 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

Вот многоуровневый метод сортировки. Я включаю fragment из модуля Angular JS, но вы можете сделать то же самое, просмотрев объекты сортировки, чтобы ваша функция сортировки имела к ним доступ. Вы можете увидеть полный модуль в 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; }; 
  • Как конвертировать JSON в HashMap с помощью Gson?
  • Преобразование строки в массив JSON
  • Сохранять порядок ключей JSON во время преобразования JSON в CSV
  • Включить связанную модель при рендеринге JSON в Rails
  • Объекты Java JSON GSON.fromJson
  • Как слить 2 json-файл с помощью jq?
  • Преобразование Json Array в обычный Java-массив
  • Неверный регистр
  • jQuery не будет анализировать мой JSON из запроса AJAX
  • Как включить междоменный запрос на сервере?
  • Правильный способ возврата JSON с помощью узла или Express
  • Давайте будем гением компьютера.