在一个 <ul> 列表上组合两个 json 调用答案

【问题标题】：Combine two json calls on one <ul> list在一个 <ul> 列表上组合两个 json 调用
【发布时间】：2015-03-19 04:19:34
【问题描述】：

我有以下代码：

JSON 调用 1

$.get(url1, function(json){

  var list = '<ul>'

  $.each(json.data, function(index, value){
    list += '<li>'+value+'</li>'
  });

  list += '</ul>'

});

JSON 调用 2

$.get(url2, function(json){

  var list = '<ul>'

  $.each(json.data, function(index, value){
    list += '<li>'+value+'</li>'
  });

  list += '</ul>'

});

此代码生成两个独立的无序列表。

这能否以灵活的方式组合，以便我可以合并两个列表，但没有嵌套的 JSON 调用？

【问题讨论】：

标签： jquery get html-lists

【解决方案1】：

您可以使用$.when 将两个promise 转换为一个：

$.when($.get(url1), $.get(url2)).done(function (res1, res2) {
  var list = '<ul>';

  var both = res1.data.concat(res2.data);
  $.each(both, function(index, value){
    list += '<li>'+value+'</li>';
  });

  list += '</ul>';

  // do something with list

})

$.when 有助于为异步 ajax 调用带来秩序，同时仍保持并行请求的效率。你的另一个问题：

jQuery each with timeout

也可以使用$.when解决。

【讨论】：

这似乎是我可以使用的解决方案。但是，我只从列表中的 url1 获得结果。知道为什么！？？
调试器中的 res1 和 res2 看过了吗？
是的，它们看起来不错。我得到 2 个对象，其中包含具有不同数据的数组。
我修复了一个错误：$.extend 仅适用于哈希，不适用于数组。

【解决方案2】：

如果没有嵌套的 AJAX 调用，我不知道有什么方法可以做到这一点。这应该有效：

var list = '<ul>';

function appendItems(json) {
    $.each(json.data, function(index, value) {
        list += '<li>' + value + '</li>';
    });
}

$.get(url1, function(json) {
    appendItems(json);
    $.get(url2, function(json) {
        appendItems(json);
        list += '</ul>';
        // list is complete
    });
});

【讨论】：

【解决方案3】：

也许这会有所帮助：

var list = '<ul>'
for(var i=1;i<=2;i++){    
     $.get('http://www.example.com/page'+i, function(json){

      $.each(json.data, function(index, value){
        list += '<li>'+value+'</li>'
      }); 

    });
}
list += '</ul>'

【讨论】：

记住有异步调用，所以list += '</ul>'可能会在AJAX处理程序之前被调用