Question

我的json对象和getJSON（）之间有一个工作连接。我还可以使用此代码对我获得的数据进行排序，我将其分类为＆＃39; name＆＃39;数组的字段，它工作正常：

$.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（）应该对其他字段上的用户进行排序，例如＆＃39; id＆＃39;或者工作＆＃39;。我这样做了：

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（＆＃39; thefieldname＆＃39;）。它执行整个$ .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>

Answer 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

Answer 2

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

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

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

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

2 个答案: