Javascript 将JSON数组排序在$getJSON EXECCUTED之后_Javascript_Jquery_Json_Sorting_Getjson

Javascript 将JSON数组排序在$getJSON EXECCUTED之后

javascript jquery json sorting

Javascript 将JSON数组排序在$getJSON EXECCUTED之后,javascript,jquery,json,sorting,getjson,Javascript,Jquery,Json,Sorting,Getjson,我的json对象和getJSON（）之间有一个工作连接。我还可以用这段代码对我得到的数据进行一次排序，我在数组的“name”字段中对其进行了排序，结果很好： $.getJSON(url,function(json){ function sortJson(a,b){ return a.name > b.name? 1 : -1; } json.users.sort(sortJson); $.each(json.users,function

我的json对象和getJSON（）之间有一个工作连接。我还可以用这段代码对我得到的数据进行一次排序，我在数组的“name”字段中对其进行了排序，结果很好：

$.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>'
        );
    }); 
});

我想要的是，当我单击一个按钮时，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>'
            );
        }); 
    });
}

现在开始工作了

    <!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>


$（文档）.ready（函数（）{
变量url=”http://localhost/X/users.php";
var json=new Array（）；
//吸气剂
$.getJSON（url、函数（数据）{
json=数据；
}).done（函数（）{
sortJsonField（）；
$（'#sortid'）。单击（函数（）{
sortJsonField（“id”）；
})
$（'#sortname'）。单击（函数（）{
sortJsonField（“名称”）；
})
$（'#sortjob'）。单击（函数（）{
sortJsonField（“工作”）；
})
});
函数sortJsonField（字段）{
函数sortJson（a，b）{
if（field==“id”）{返回a.id>b.id？1:-1；}else
if（field==“job”）{返回a.job>b.job？1:-1；}其他
返回a.name>b.name？1:-1；
}
json.users.sort（sortJson）；
showJSON（）；
};
//淋浴
函数showJSON（）{
$（“#输出”）.empty（）；
$.each（json.users，函数（i，行）{
$（“#输出”）。追加(
“”+row.id+”
“+row.name+”
“+row.job+””
);
});
};
showJSON（）；
});
身份证件
名称
工作

执行以下操作：

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>'
        );
    });

};

……对此：

{"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"}
]}

{“用户”：[
{“id”：“1”，“name”：“John”，“job”：“worker”}，//您需要创建一个变量来存储JSON，并在请求返回后使用它
var jsonData;
$.getJSON(url,function(json){ 
      jsonData = json;
}); 

现在，您可以对jsonData
中包含的数据进行排序。我认为您应该以中间方式保存数据。此存储应该是显示数据的基础，您的排序功能仅在该存储上工作。加载功能仅用于更新该存储。但是如果不浏览html，则有点难以给出一个更具体的例子。我想我明白了。我从$.getJSON获得的数据应该存储在一个数组中，我应该显示并排序该数组，而不是直接检索到的数据。这就是你的意思吗？顺便说一句，我的html只有一个用于数据和一些脚本源引用。是的，差不多。请参阅@Abimbola的答案，了解一种方法gh我建议不要使用全局变量。另外，如果你打算实现很多这样的功能，请看一下已建立的，因为jQuery并不是这里的最佳选择。我仍在学习主要功能。我可能会在稍后的onokay中研究框架，对其进行全面测试，除了json=response之外，所有功能都正常工作
。当我手动将json数组值写入“json”时，它会起作用（exvar json={users:[{'name'：'as'，etc}]}）.the$.getjson部分没有放入检索到的值，我检查了连接，它已连接。对它有任何修复程序吗？你能从服务器上发布一个JSON响应的片段吗，就像它显示的那样？我可以告诉你有什么问题，因为这正是我所拥有的：{“users”：[{“id”：“1”，“name”：“job”，“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”}]}
根据您发布的结构，这应该可以很好地工作。唯一的情况是如果您调用Sortjsonfeld（）$.getJSON（）
调用返回之前的
函数。检查这是否是问题所在，或者发布一个jsfiddle是的，我检查了它，代码看起来不错。但它只是不存储数组。当我手动添加数组值时，它可以工作（只显示，没有排序）。另一个问题是我应该如何调用排序函数。当我放置$（“#sortid”）。单击（sortJsonField（'id'））例如，它在页面加载时起作用，而不是单击#sortid元素时起作用。我现在正在搜索json到数组的替代方案。还有函数启动。是的，我得到了这个，但jsonData=json现在是个问题。如果不起作用，我将在谷歌上搜索一些将json存储到数组中的替代方案
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>'
        );
    });

};

{"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"}
]}

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