본문 바로가기

others

JSON Object 정렬하기

JSON객체를 아래와 같이 생성했을 때 자동으로 key에 의해 정렬이 됩니다. 브라우저마다 좀 틀리기는 한듯..ㅡ.ㅡ;

//선언

var testData1 = {

        "55": "빨강",

        "33": "초록",

        "30": "검정",

        "16": "파랑",

        "29": "노랑"

};

//테스트

$.each(testData1, function(index, value){

        window.console.log("정렬전 : " + index + " = " + value);

});

 

결과

로그: 정렬전 : 16 = 파랑

로그: 정렬전 : 29 = 노랑

로그: 정렬전 : 30 = 검정

로그: 정렬전 : 33 = 초록

로그: 정렬전 : 55 = 빨강

  

이경우 value로 정렬하고 싶을때는 색인배열화하여 sort로 정렬하여 사용하면 됩니다.

//배열로

var sortData =[];

$.each(testData1, function(index, value){

        window.console.log("정렬전 : " + index + " = " + value);

        sortData.push({key: index, value: value});

});

//sortData는 아래와 같은 형태가 된다.

var testData2 = [

        {"key": "55", "value": "빨강"},      

        {"key": "33", "value": "초록"},      

        {"key": "30", "value": "검정"},      

        {"key": "16", "value": "파랑"},      

        {"key": "29", "value": "노랑"}

];

//정렬

sortData.sort(function(a, b){

return(a.value < b.value) ? -1 : (a.value > b.value) ? 1 : 0;

});

//테스트

$.each(sortData, function(index, value){

        window.console.log("정렬후 : " + value.key + " = " + value.value);

});

 

결과

로그: 정렬후 : 30 = 검정

로그: 정렬후 : 29 = 노랑

로그: 정렬후 : 55 = 빨강

로그: 정렬후 : 33 = 초록

로그: 정렬후 : 16 = 파랑


html 전체소스

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>JSON 정렬 테스트</title>

<!--

<script type="text/javascript" src="http://code.jquery.com/jquery.js" charset="utf-8"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" charset="utf-8"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>

-->

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js" charset="utf-8"></script>

<script type="text/javascript" charset="UTF-8">

$(document).ready(function(){

        //JSON 선언

        var testData1 = {

               "55": "빨강",

               "33": "초록",

               "30": "검정",

               "16": "파랑",

               "29": "노랑"

        };

        //배열로

        var sortData =[];

        $.each(testData1, function(index, value){

               window.console.log("정렬전 : " + index + " = " + value);

               sortData.push({key: index, value: value});

        });

        //sortData는 아래와 같은 형태가 된다.

        var testData2 = [

               {"key": "55", "value": "빨강"},      

               {"key": "33", "value": "초록"},      

               {"key": "30", "value": "검정"},      

               {"key": "16", "value": "파랑"},      

               {"key": "29", "value": "노랑"}

        ];

        //정렬

        sortData.sort(function(a, b){

               return(a.value < b.value) ? -1 : (a.value > b.value) ? 1 : 0;

        });

        //테스트

        $.each(sortData, function(index, value){

               window.console.log("정렬후 : " + value.key + " = " + value.value);

        });

});

</script>

</head>

<body>

<div>

</div>

</body>

</html>

'others' 카테고리의 다른 글

AES, SHA 암호화 1, JAVA  (1) 2015.08.26
facebook note에 있던 잡다한것들..  (0) 2013.06.03
checkbyte jQuery plugin  (0) 2011.11.11
Velocity에서의 Map 사용  (0) 2009.11.24
자바스크립트 체크박스 관련  (0) 2009.07.30