반응형
값으로 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.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);
데모 : http://jsfiddle.net/VAKrE/1019/
동일한 값을 성공적으로 전달합니다 (동일한 순서 유지). 유연성 : 상위 (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")
여러 속성을 기준으로 정렬 할 수도 있습니다. 여기에 그것을 보여주는 플렁크가 있습니다.
다양한 유형과 대문자 및 소문자로 작업하는 솔루션입니다.
예를 들어, toLowerCase문이 없으면 "Goodyear"는 오름차순 정렬로 "doe"앞에옵니다. 내 답변 하단의 코드 스 니펫을 실행하여 다른 동작을 확인하십시오.
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 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("<div class='people'>" + this.l_name + "</div><div class='people'>" + this.f_name + "</div><div class='people'>" + this.sequence + "</div><br />");
});
}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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons" style="background-color: rgba(240, 255, 189, 1);">
Sort the JSON array <strong style="color: red;">with</strong> toLowerCase:
<ul>
<li>Type: string</li>
<li>Property: lastname</li>
</ul>
<button onclick="sortJsonString(); return false;">Sort JSON</button>
Asc Sort
<input id="chkAscString" type="checkbox" checked="checked" />
</div>
<div class="buttons" style="background-color: rgba(255, 214, 215, 1);">
Sort the JSON array <strong style="color: red;">without</strong> toLowerCase:
<ul>
<li>Type: string</li>
<li>Property: lastname</li>
</ul>
<button onclick="sortJsonUL(); return false;">Sort JSON</button>
Asc Sort
<input id="chkAsc" type="checkbox" checked="checked" />
</div>
<div class="buttons" style="background-color: rgba(240, 255, 189, 1);">
Sort the JSON array:
<ul>
<li>Type: int</li>
<li>Property: sequence</li>
</ul>
<button onclick="sortJsonInt(); return false;">Sort JSON</button>
Asc Sort
<input id="chkAscInt" type="checkbox" checked="checked" />
</div>
<br />
<br />
<div id="data" style="float: left; border: 1px solid black; width: 60%; margin: 5px;">Data</div>다음은 다단계 정렬 방법입니다. 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;
};
참고 URL : https://stackoverflow.com/questions/881510/sorting-json-by-values
반응형
'Development Tip' 카테고리의 다른 글
| 태그 모양에 대한 요소는 오류로 선언되어야합니다. (0) | 2020.12.06 |
|---|---|
| Mongoose에서 .populate ()를 사용하여 특정 필드를 반환합니다. (0) | 2020.12.06 |
| cout << 인쇄시 C ++ 정렬 (0) | 2020.12.06 |
| RVM을 어떻게 사용하고 전역 적으로 사용 가능한 gem을 생성합니까? (0) | 2020.12.06 |
| 날짜가 30 일보다 오래된 지 확인 (0) | 2020.12.06 |