在 $.getJSON 执行后对 JSON 数组进行排序答案

【问题标题】：Sort JSON array after $.getJSON excecuted在 $.getJSON 执行后对 JSON 数组进行排序
【发布时间】：2014-04-30 14:58:00
【问题描述】：

我的 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('thefieldname')。它执行整个 $.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>

【问题讨论】：

我认为您应该以中间方式保存数据。此 storage 应该是显示数据的基础，并且您的排序功能仅适用于该存储。仅调用 load 函数来更新该存储。但是如果不看一下你的 html，很难给出一个更具体的例子。
我想我明白了。我从 $.getJSON 获得的数据应该存储在一个数组中，我应该显示和排序该数组，而不是直接检索到的数据。你是这个意思吗？顺便说一句，我的 html 只有一个
是的，差不多。请参阅@Abimbola 的答案以了解一种方法，但我建议不要使用全局变量。另外，如果您打算实现很多这样的功能，请查看已建立的frameworks，因为 jQuery 在这里真的不是最好的选择。
我还在学习主要功能。稍后我可能会研究框架

标签： javascript jquery json sorting getjson

【解决方案1】：

这样做：

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 结构有点不正确...

改变这个：

{"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 结构的网站的网址：http://www.freeformatter.com/json-validator.html

【讨论】：

好的，完全测试了这个，除了json = response之外一切正常。当我手动将 json 数组值写入“json”时，它可以工作（例如 var json = { users: [ {'name':'as',etc etc etc} ] }）。 $.getjson 部分没有放置检索到的值，我检查了连接，它已连接。有什么解决办法吗？
你能发布一个来自服务器的 JSON 响应的 sn-p，就像它看起来一样吗？我可以据此告诉你哪里出了问题
这正是我所拥有的：{"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"}]}
根据您发布的结构，这应该可以正常工作。唯一会中断的情况是，如果您在$.getJSON() 调用返回之前调用了sortJsonField() 函数。检查是否是问题所在，或发布 jsFiddle
是的，我检查过了，代码看起来不错。但它只是不存储数组。当我手动添加它工作的数组值时（只显示，没有排序）。另一个问题是我应该如何调用排序函数。例如，当我输入$('#sortid').click(sortJsonField('id')) 时，它会在页面加载时起作用，而不是在单击#sortid 元素时起作用。我现在正在寻找 json 到数组的替代方案。还有函数触发。

【解决方案2】：

您需要创建一个变量来存储 JSON 并在请求返回后使用它。

var jsonData;
$.getJSON(url,function(json){ 
      jsonData = json;
});

现在可以对jsonData中包含的数据进行排序了。

【讨论】：

是的，我得到了这个，但是 jsonData = json 现在是问题所在。不工作，我会谷歌一些将 json 存储在数组中的替代方法