在$.getJSON异常之后对JSON数组进行排序
Sort JSON array after $.getJSON excecuted
我的json对象和getJSON((之间有一个工作连接。我也可以用这段代码对我得到的数据进行排序,我在数组的"名称"字段中对其进行了排序,它运行良好:
$.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数组:
{"users":[
{"id":"1","name":"John","job":"worker"}
{"id":"2","name":"Mike","job":"innovator"}
{"id":"3","name":"Anna","job":"reader"}
]}
我想要的是,当我点击一个按钮时,sortJson((应该在另一个字段(如"id"或"job"(上对用户进行排序。我做到了:
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('efield名称'(。它执行整个$.getJSON,与url建立新的连接并与后端通信。我不想这样,它太慢了,服务器的工作量会很大。我想获得一次json,然后对数组进行排序(所以实际上我只需要刷新$.each函数(。但它不起作用。
有什么想法吗?
好吧,我修改了代码,我觉得我真的很接近:
<!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>'
);
});
};
EDIT:此外,JSON结构有点不正确。。。
更改此项:
{"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中断。修改它,它应该全部工作。
p。S这是我用来检查您的JSON结构的网站的url:http://www.freeformatter.com/json-validator.html
您需要创建一个变量来存储JSON,并在请求返回后使用它。
var jsonData;
$.getJSON(url,function(json){
jsonData = json;
});
现在,您可以对jsonData
中包含的数据进行排序。
相关文章:
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- Javascript中的多维数组排序索引问题
- 如何按日期对Javascript对象数组排序
- 数组排序后显示更改
- 当许多元素相等时,Javascript数组排序无法正常工作
- Javascript数组排序速度受字符串长度的影响
- 按唯一键将对象数组排序为数组
- 以 js 为单位的数组排序
- js 数组排序无法正常工作
- 数组排序.论点从何而来
- 不需要的数组排序
- 数组排序不正确/不可预测,使用 indexOf 时
- Javascript将数组排序到树中
- 随后的多维数组排序会产生意外的结果
- 数组排序基于纯javascript搜索文本匹配
- Javascript自定义数组按数组排序
- 使用字符串按属性错误对对象进行数组排序
- 多维数组排序
- JavaScript与PHP在数组排序中的对比
- Javascript-关联数组排序