在执行$ .getJSON之后对JSON数组进行排序 [英] Sort JSON array after $.getJSON excecuted
问题描述
我的json对象和getJSON()之间有有效的连接.我还可以使用此代码对获得的数据进行排序，然后在数组的名称"字段上对其进行排序，并且可以正常工作:
I have a working connection between my json object and getJSON(). I can also sort the data i get once with this code, I sorted it on the 'name' field of the array and it works fine:
$.getJSON(url,function(json){
function sortJson(a,b){
return a.name > b.name? 1 : -1;
}
json.users.sort(sortJson);
$.each(json.users,function(i,row){
$("#output").append(
'<li>' + row.id + row.name + row.job + '</li>'
);
});
});
这是我的json数组:
and this is my json array:
{"users":[
{"id":"1","name":"John","job":"worker"}
{"id":"2","name":"Mike","job":"innovator"}
{"id":"3","name":"Anna","job":"reader"}
]}
我想要的是，当我单击按钮时，sortJson()应该在"id"或"job"之类的其他字段上对用户进行排序.我是这样做的:
What I want is that when i click on a button the sortJson() should sort the users on another field like 'id' or 'job'. I did this:
function sortJsonField(x){
var field = x;
var url="http://localhost/api/users.php";
$.getJSON(url,function(json){
function sortJson(a,b){
if(field == "id"){ return a.id > b.id? 1 : -1; }else
if(field == "job"){ return a.job > b.job? 1 : -1; }else
return a.name > b.name? 1 : -1;
}
json.users.sort(sortJson);
$.each(json.users,function(i,row){
$("#output").append(
'<li>' + row.id + row.name + row.job + '</li>'
);
});
});
}
它奏效了，现在您应该想知道我的问题是什么.在这里，每次我单击按钮以执行 sortJsonField('thefieldname').它执行整个$ .getJSON，与url建立新连接并与后端通信.我不希望这样，它太慢了，服务器的工作量也很大. 我想一次获取json，然后对数组进行排序(所以实际上只有$ .each函数需要刷新).但这不起作用.
and it worked, now you should be wondering what my problem is. Here it is, every time I click on the button to execute sortJsonField('thefieldname'). It executes the whole $.getJSON, making a new connection with the url and communicating with the back-end. I don't want that, it's too slow and the workload will be heavy for the server. I want to get the json once and then sort the array afterwards(so actually only the $.each function i need to refresh). But it's not working.
有什么想法吗?
好吧，我修改了代码，我认为我真的很接近:
<!DOCTYPE html><head>
<title>Users</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
var url="http://192.168.247.86/X/users.php";
var json = { users: [] };
//getting & storing
$.getJSON(url,function(response){
json = response;
});
//sorting
function sortJsonField(field){
alert(field);
function sortJson(a,b){
if(field == "id"){ return a.id > b.id? 1 : -1; }else
if(field == "job"){ return a.job > b.job? 1 : -1; }else
return a.name > b.name? 1 : -1;
}
json.users.sort(sortJson);
showJSON();
};
//showing
function showJSON(){
$.each(json.users,function(i,row){
$("#output").append(
'<li><em>' + row.id + '</em><br>' + row.name + '<br>' + row.job + '</li>'
);
});
};
});
</script>
</head>
<h1>Users</h1>
<button onClick="sortJsonField(Id)">Id</button>
<button onClick="sortJsonField('Name')">Name</button>
<button onClick="sortJsonField('Job')">Job</button>
<ul id="output"></ul>
</body>
</html>
这是我的json:
{"users":[{"id":"1","name":"John","job":"Worker"},{"id":"2","name":"Mike","job":"Reader"},{"id":"3","name":"Mary","job":"Writer"},{"id":"4","name":"Angelo","job":"Player"},{"id":"5","name":"Kevin","job":"Doctor"},{"id":"6","name":"Zidane","job":"Player"}]}
现在就可以使用
<!DOCTYPE html>
<head>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var url="http://localhost/X/users.php";
var json = new Array();
//getter
$.getJSON(url,function(data){
json = data;
}).done(function(){
sortJsonField();
$('#sortid').click(function(){
sortJsonField("id");
})
$('#sortname').click(function(){
sortJsonField("name");
})
$('#sortjob').click(function(){
sortJsonField("job");
})
});
function sortJsonField(field){
function sortJson(a,b){
if(field == "id"){ return a.id > b.id? 1 : -1; }else
if(field == "job"){ return a.job > b.job? 1 : -1; }else
return a.name > b.name? 1 : -1;
}
json.users.sort(sortJson);
showJSON();
};
//shower
function showJSON(){
$('#output').empty();
$.each(json.users,function(i,row){
$("#output").append(
'<li><em>' + row.id + '</em><br>' + row.name + '<br>' + row.job + '</li>'
);
});
};
showJSON();
});
</script>
</head>
<body>
<button id="sortid">Id</button>
<button id="sortname">Name</button>
<button id="sortjob">Job</button>
<div id="output"></div>
</body>
</html>
推荐答案
执行以下操作:
var json = { users: [] };
var url="http://localhost/api/users.php";
$.getJSON(url,function(response){
json = response;
});
function sortJsonField(field){
function sortJson(a,b){
if(field == "id"){ return a.id > b.id? 1 : -1; }else
if(field == "job"){ return a.job > b.job? 1 : -1; }else
return a.name > b.name? 1 : -1;
}
// No need to assign this to a new array.
json.users.sort(sortJson);
showJSON();
};
function showJSON(){
// May empty the ul/ol before doing this? up to you..
$.each(json.users,function(i,row){
$("#output").append(
'<li>' + row.id + row.name + row.job + '</li>'
);
});
};
编辑:此外，JSON结构略有不正确...
Also, the JSON structure is slightly incorrect...
更改此:
{"users":[
{"id":"1","name":"John","job":"worker"}
{"id":"2","name":"Mike","job":"innovator"}
{"id":"3","name":"Anna","job":"reader"}
]}
...对此:
{"users":[
{"id":"1","name":"John","job":"worker"}, // <--- Do you see the commas here?
{"id":"2","name":"Mike","job":"innovator"}, // <--- and here?
{"id":"3","name":"Anna","job":"reader"}
]}
对象的格式正确，但这不是有效的数组，因此javascript会中断.对其进行修改，就可以正常工作.
The objects are well-formed, but that is not a valid array, so javascript breaks. Modify it and it should all work.
P.S This is the url of the website I used to check your JSON structure: http://www.freeformatter.com/json-validator.html
这篇关于在执行$ .getJSON之后对JSON数组进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
