복붙노트

[JQUERY] 값으로 JSON을 정렬

JQUERY

값으로 JSON을 정렬

해결법

  1. 1.jQuery를 정렬에 특히 도움이되지 않습니다, 그러나 여기 우아하고 효율적인 솔루션입니다. 그냥 속성 이름과 순서 (오름차순 또는 내림차순)를 받아 단순 비교 기능을 기본 정렬 () 메서드를 호출 일반 JS 함수를 작성 :

    jQuery를 정렬에 특히 도움이되지 않습니다, 그러나 여기 우아하고 효율적인 솔루션입니다. 그냥 속성 이름과 순서 (오름차순 또는 내림차순)를 받아 단순 비교 기능을 기본 정렬 () 메서드를 호출 일반 JS 함수를 작성 :

    var people = [
    {
        "f_name": "john",
        "l_name": "doe",
        "sequence": "0",
        "title" : "president",
        "url" : "google.com",
        "color" : "333333",
    }
    // etc
];

function sortResults(prop, asc) {
    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);
        }
    });
    renderResults();
}

    그때:

    sortResults('l_name', true);

    여기에 작업 예제를 재생합니다.

  2. 2.데모 : https://jsfiddle.net/kvxazhso/

    데모 : https://jsfiddle.net/kvxazhso/

    성공적으로 동일한 값 (동일한 순서로 유지) 전달. 유연성 : 핸들 상승 (123) 또는 자손 (321), 숫자, 문자 및 unicodes 작동합니다. 모든 시험 장치의 작품 (크롬, 안드로이드 기본 브라우저, 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(arr, key, way) {
    return arr.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));

  3. 3.

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

  4. 4.외부 라이브러리를 사용하여 괜찮다면, Lodash 멋진 유틸리티가 많이있다

    외부 라이브러리를 사용하여 괜찮다면, 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")

    또한 여러 속성으로 정렬 할 수 있습니다. 여기에 행동을 보여주는 쿵하는 소리입니다

  5. 5.와 toLowerCase 문 않고, 다른 유형 및 상하 cases.For 예 작업 솔루션, "굿"는 오름차순으로 정렬에 "미상"전에 올 것이다. 서로 다른 행동을보고 내 대답의 맨 아래에있는 코드를 실행합니다.

    와 toLowerCase 문 않고, 다른 유형 및 상하 cases.For 예 작업 솔루션, "굿"는 오름차순으로 정렬에 "미상"전에 올 것이다. 서로 다른 행동을보고 내 대답의 맨 아래에있는 코드를 실행합니다.

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

    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 사람들 = [{ "f_name": "존", "l_name": "미상" "순서": 0 }, { "f_name": "마이클" "l_name": "굿" "시퀀스"1 }, { "f_name": "법안" "l_name": "존슨" "시퀀스"4 }, { "f_name": "것" "l_name": "말론" "순서": 2 }, { "f_name": "팀" "l_name": "알렌" "순서": 3 }]; sortJsonLcase 기능 (요소, 소품, ASC) { 소자 element.sort = (함수 (a, b) { 경우 (오름차순) { 창 (a [소품]> B [소품])? 1 : ((a [소품] <2 [소품]) -1 : 0?); } 다른 { ([소품] B> A [소품]) 복귀? 1 : ((b [소품] 에서는 parseInt (b [소품]))? 1 : ((에서는 parseInt (a [소품]) <에서는 parseInt (b [소품])) -1 : 0?); } 다른 { 창 (에서는 parseInt (b [소품])>에서는 parseInt (a [소품]))? 1 : ((에서는 parseInt (b [소품]) <에서는 parseInt (a [소품])) -1 : 0?); } }); 단절; 기본: 소자 element.sort = (함수 (a, b) { 경우 (오름차순) { 창 (a [소품] .toLowerCase ()> B [소품] .toLowerCase ())? 1 : ((a [소품] .toLowerCase () A [소품] .toLowerCase ())? 1 : ((b [소품] .toLowerCase () "+ this.l_name + "

    "+ this.f_name + " < DIV 클래스 = '사람'> "+ this.sequence +"
    "); }); } 몸 { 글꼴 - 가족 : 굴림; } .people { 표시 : 인라인 블록; 폭 : 100 픽셀; 국경 : 검은 색 점선 x 1 픽셀; 패딩 : 5px; 여백 : 5px; } .buttons { 국경 : 1 픽셀의 검은 색; 패딩 : 5px; 여백 : 5px; 왼쪽으로 뜨다; 폭 : 20 %; } UL { 여백 : 5px 0 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    정렬 JSON 배열의 와 와 toLowerCase :

티스토리툴바