按JSON變量按整數排序結果

Question

我正在基於兩個Google API構建jQuery搜索建議腳本。 每個API輸出一個“相關性”整數（我將在每個項目旁邊返回該整數以進行演示），並且我希望能夠為每個項目按該整數排序結果。

我怎樣才能做到這一點？ 我試圖使腳本將所有內容輸出到一個變量中，但我無法完全解決。

可以在此處查看有效的演示： http : //jsfiddle.net/rEPf3/

我的jQuery代碼是：

$(document).ready(function(){
    $("#search").keyup(function(){
        $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?",function(data){
            var suggestion="";
            for(var key in data[1]){
                if(data[4]["google:suggesttype"][key]=="NAVIGATION"){
                suggestion+="<li><a href='"+data[1][key]+"'>"+data[2][key]+"</a> <i>("+data[4]["google:suggestrelevance"][key]+")</i></li>";
                }else{
                suggestion+="<li>"+data[1][key]+" <i>("+data[4]["google:suggestrelevance"][key]+")</i></li>";
                }
            }
            $("#suggest").html(suggestion);
        });
        $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?",function(data){
            var suggestion2="";
            for(var key in data.result){
                suggestion2+="<li>"+data.result[key].name+" <i>("+data.result[key].score*4+")</i></li>";
            }
            $("#suggest2").html(suggestion2);
        });
    });
});

Answer 1

這是完整的代碼，您必須將所有結果附加到一個容器中.ajaxComplete事件排序

$(document).ready(function () {
    $("#search").keyup(function () {
        $("#suggest").empty();
        $.getJSON("http://suggestqueries.google.com/complete/search?q=" + $("#search").val() + "&client=chrome&callback=?", function (data) {
            var suggestion = "";

            for (var key in data[1]) {
                if (data[4]["google:suggesttype"][key] == "NAVIGATION") {
                    suggestion += "<li><a href='" + data[1][key] + "'>" + data[2][key] + "</a> <i>(" + data[4]["google:suggestrelevance"][key] + ")</i></li>";
                } else {
                    suggestion += "<li>" + data[1][key] + " <i>(" + data[4]["google:suggestrelevance"][key] + ")</i></li>";
                }
            }
            $("#suggest").append(suggestion);
        });
        $.getJSON("https://www.googleapis.com/freebase/v1/search?query=" + $("#search").val() + "&limit=3&encode=html&callback=?", function (data) {
            var suggestion2 = "";
            for (var key in data.result) {
                suggestion2 += "<li>" + data.result[key].name + " <i>(" + data.result[key].score * 4 + ")</i></li>";
            }
            $("#suggest").append(suggestion2);

        });
        $(document).ajaxComplete(function (event, xhr, settings) {
            $("#suggest").html($("#suggest li").sort(function (a, b) {
                return (parseInt($(a).find("i").html(), 10) > parseInt($(b).find("i").html(), 10));

            }));
        });
    });
});

http://jsfiddle.net/rEPf3/8/

Answer 2

我認為最干凈的方法是將每個數據集的結果推送到外部作用域變量中，然后從中進行排序和呈現。 示例如下。

var combined = [],
    completed = 0;

$(document).ready(function () {
    $("#search").keyup(function () {
        combined = [];
        completed = 0;
        $.getJSON("http://suggestqueries.google.com/complete/search?q=" + $("#search").val() + "&client=chrome&callback=?", function (data) {
            for (var key in data[1]) {
                if (data[4]["google:suggesttype"][key] == "NAVIGATION") {
                    combined.push({
                        href : data[1][key],
                        text : data[2][key],
                        score : parseInt(data[4]["google:suggestrelevance"][key],10)
                    });
                } else {
                    combined.push({
                        text : data[1][key],
                        score : parseInt(data[4]["google:suggestrelevance"][key],10)
                    });
                }
            }
            if ( ++completed == 2 ) complete();
        });
        $.getJSON("https://www.googleapis.com/freebase/v1/search?query=" + $("#search").val() + "&limit=3&encode=html&callback=?", function (data) {
            for (var key in data.result) {
                combined.push({
                    text : data.result[key].name,
                    score : parseInt(data.result[key].score,10) * 14
                });
            }
            if ( ++completed == 2 ) complete();
        });
    });
});


function complete(){
    console.log(combined);
    combined.sort(function(a,b){ return b.score - a.score; });
    var buffer = [];
    combined.forEach(function(result){
        buffer.push("<li>"+result.text+" <i>("+result.score+")</i></li>")
    })
    $("#suggest").html(buffer.join(""));
}

編輯

此解決方案未考慮以下事實：用戶輸入的速度可能比API快，API調用可能無法按順序返回，並且不做任何嘗試來限制對API的調用次數每個API。 為了使其表現得更一致（更有效）：

• 更改按鍵處理程序，以使每次按鍵取消之前的任何超時，然后以合理的延遲（300ms似乎是一個合理的起點）設置一個新的超時，然后觸發API調用
• 將每個API調用包裝在立即執行的函數中，以便您可以在進行每個API調用時引用全局計數器的值。 每次按鍵時增加計數器，並且不處理計數器不匹配的API調用的響應

Answer 3

這樣嘗試

將此行添加到for循環之前

data[4]["google:suggestrelevance"].sort();

觀看演示

更新

嘗試使用單個變量組合數據集

觀看演示

Answer 4

將它們放在一起進行排序。

以下是代碼。
使用promise可以知道兩個ajax請求都已完成。

$(document).ready(function(){
    $("#search").keyup(function(){
        var mergedData = [];
    var promise1 = $.getJSON("http://suggestqueries.google.com/complete/search?q="+$("#search").val()+"&client=chrome&callback=?",function(data){
        var suggestion="";
        console.log(data);
        var arr  = [];
        for(var i in data[1]){
        arr[i] = {value : data[1][i], rel : data[4]['google:suggestrelevance'][i]};
        }

        $.extend(mergedData,arr);

        arr.sort(function(a, b){
            return (b['rel']-a['rel']);
        });


    });
    var promise2 = $.getJSON("https://www.googleapis.com/freebase/v1/search?query="+$("#search").val()+"&limit=3&encode=html&callback=?",function(data){
        console.log('data of second request', data);
        var suggestion2="";
        var arr = [];
        for(var key in data.result){
            arr[key] = {value : data.result[key].name, rel : data.result[key].score};
        }
        $.extend(mergedData,arr);
        $("#suggest2").html(suggestion2);
    });



        $.when(promise1, promise2).then(function(){
             mergedData.sort(function(a, b){
            return (b['rel']-a['rel']);
        });
            var suggestion = '';
            for(var key in mergedData){
                suggestion+='<li>' + mergedData[key].value + ' ' + mergedData[key].rel + '</li>';
            }    
            $("#suggest").html(suggestion);
        });
    });



});

更新了工作的jsfiddle： http : //jsfiddle.net/rEPf3/13/