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

我認爲最乾淨的方法是從每個數據集的結果推到一個外部範圍的變量，然後進行排序，並從渲染。示例如下。

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的調用次數。爲了使這種行爲更加一致（和更有效）：

• 更改按鍵處理，使得每個按鍵取消以往任何超時，然後在一個合理的延遲設置一個新的超時（300毫秒似乎是一個合理的地方開始），這然後觸發API調用
• 將每個API調用包裝成一個立即執行的函數，以便您可以在每次調用API時引用全局計數器的值。每次按鍵時增加計數器，並且不處理來自API調用的響應，其中計數器不匹配

Answer 2

這裏是你的完整代碼，你必須要追加所有結果一個容器和排序在.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 3

嘗試這樣

之前將添加此行的for循環

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

See Demo

更新

嘗試通過使用單個可變

See Demo數據集組合

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/