jQuery 按值对 JSON 进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/881510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sorting JSON by values
提问by Subliminal Hash
I have a very simple JSON object like the following:
我有一个非常简单的 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"
}
]
}
Now that this is returned from my server side code, I run jQuery.eachto form the necessary html and output the result.
现在这是从我的服务器端代码返回的，我运行jQuery.each以形成必要的 html 并输出结果。
Right now what I am doing is sending an AJAX call to the server containing my sort info... e.g. "Title DESC" and re-run an SQL query to return the new result set. But I want to avoid this and use jQuery to sort the resulting JSON to prevent round trips to the server, and multiple database access.
现在我正在做的是向包含我的排序信息的服务器发送一个 AJAX 调用......例如“标题 DESC”并重新运行 SQL 查询以返回新的结果集。但我想避免这种情况，并使用 jQuery 对生成的 JSON 进行排序，以防止往返服务器和多个数据库访问。
How can I achieve this using jQuery?
如何使用 jQuery 实现这一目标？
回答by Sean the Bean
jQuery isn't particularly helpful for sorting, but here's an elegant and efficient solution. Just write a plain JS function that takes the property name and the order (ascending or descending) and calls the native sort() method with a simple comparison function:
jQuery 对排序并不是特别有帮助，但这里有一个优雅而有效的解决方案。只需编写一个简单的 JS 函数，它接受属性名称和顺序（升序或降序）并使用简单的比较函数调用原生 sort() 方法：
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();
}
Then:
然后：
sortResults('l_name', true);
Play with a working example here.
在这里玩一个工作示例。
回答by Hugolpz
Demo: http://jsfiddle.net/VAKrE/1019/
演示：http: //jsfiddle.net/VAKrE/1019/
Successfully pass equal values (keep same order). Flexible : handle ascendant (123) or descendant (321), works for numbers, letters, and unicodes. Works on all tested devices (Chrome, Android default browser, FF).
成功传递相等的值（保持相同的顺序）。灵活：处理上升 (123) 或下降 (321)，适用于数字、字母和 unicode。适用于所有经过测试的设备（Chrome、Android 默认浏览器、FF）。
Given data such:
给定数据，例如：
var people = [
{ 'myKey': 'A', 'status': 0 },
{ 'myKey': 'B', 'status': 3 },
{ 'myKey': 'C', 'status': 3 },
{ 'myKey': 'D', 'status': 2 },
{ 'myKey': 'E', 'status': 7 },
...
];
Sorting by ascending or reverse order:
按升序或倒序排序：
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));
回答by Tahir Akhtar
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);
回答by tcql
If you don't mind using an external library, Lodashhas lots of wonderful utilities
如果你不介意使用外部库，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")
You can also sort by multiple properties. Here'sa plunk showing it in action
您还可以按多个属性进行排序。这是一个 plunk 显示它在行动
回答by krlzlx
Solution working with different types and with upper and lower cases.
For example, without the toLowerCasestatement, "Goodyear" will come before "doe" with an ascending sort. Run the code snippet at the bottom of my answer to view the different behaviors.
使用不同类型和大小写的解决方案。
例如，如果没有该toLowerCase语句，“Goodyear”将以升序排在“doe”之前。运行我的答案底部的代码片段以查看不同的行为。
JSON DATA:
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 Sort Function:
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);
}
});
}
}
Usage:
用法：
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>回答by KSev
Here's a multiple-level sort method. I'm including a snippet from an Angular JS module, but you can accomplish the same thing by scoping the sort keys objects such that your sort function has access to them. You can see the full module at Plunker.
这是一种多级排序方法。我包含了一个来自 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;
};
