Question

我想知道是否有办法从两个不同的来源提取和使用JSON数据。目前，代码如下所示：

//JSON1
$.getJSON('url1',function(data){
    $.each(data,function(key,val){
        //code
    });

});

//JSON2
$.getJSON('url2',function(data){
    $.each(data,function(key,val){
        //code
    });

});

当我这样做时，我似乎从一个JSON函数创建的变量在另一个中不可用，这使得它们很难一起使用。有没有更好的方法让这两个一起工作？

Answer 1

此函数将一组url和一个回调作为参数：

function getMultiJSON(urlList,callback) {
  var respList = {};
  var doneCount = 0;

  for(var x = 0; x < urlList.length; x++) {
    (function(url){
      $.getJSON(url,function(data){
          respList[url] = data;
          doneCount++;

          if(doneCount === urlList.length) {
            callback(respList);
          }
      });

    })(urlList[x]);
  }
}

您可以这样使用它：

getMultiJSON(['url1','url2'],function(response) {

     // in this case response would have 2 properties,
     //
     // response.url1  data for url1
     // response.url2  data for url2

     // continue logic here
});

您可能希望添加超时，因为如果任何URL无法加载，函数将永远不会调用您的处理程序

Answer 2

轻松使用开源项目jinqJs（http://www.jinqJs.com）

var data1 = jinqJs().from('http://....').select();
var data2 = jinqJs().from('http://....').select();

var result = jinqJs().from(data1, data2).select();

该示例执行同步调用，您可以通过执行以下操作来执行异步调用：

var data1 = null;
jinqJs().from('http://....', function(self){ data1 = self.select(); });

结果将包含两个结果。

Answer 3

如果您控制端点，则可以一次性返回所需的所有数据。然后你的数据看起来像：

{
    "url1_data": url1_json_data,
    "url2_data": url2_json_data
}

如果你还需要点击2个端点，你可以将第一个ajax调用的结果传递给第二个函数（但这会使你的2个ajax调用同步）：

function getJson1(){
    $.getJSON('url1',function(data){
        getJson2(data);
    });
}
function getJson2(json1Data){
    $.getJSON('url2',function(data){
        //Do stuff with json1 and json2 data
    });
}
getJson1();

Answer 4

使用var（或块，使用let）在函数内声明的变量在函数（或块）之外不可用。

$.getJSON('url1',function(data){
    $.each(data,function(key,val){
        var only_accessible_here = key;
    });

});

因此，如果您想要在函数范围之外可以访问的变量，则需要在它们所使用的函数之外声明它们。

var combined_stuff = ''

$.getJSON('url1',function(data){
    $.each(data,function(key,val){
        combined_stuff += val;
    });

});

//JSON2
$.getJSON('url2',function(data){
    $.each(data,function(key,val){
         combined_stuff += val;
    });

});

正如Marc B所说，无法知道combined_stuff变量的更新顺序，首先是JSON1，首先是JSON2，还是只有一个，如果其中一个getJSON调用失败，或两者都失败。

如果更新顺序很重要，请在您要先呼叫的功能中调用您想要使用的第二个。

var combined_stuff = ''

$.getJSON('url1',function(data){
    $.each(data,function(key,val){
        combined_stuff += val;

        //JSON2
        $.getJSON('url2',function(data){
            $.each(data,function(key,val){
                 combined_stuff += val;
            });
        });
    });
});

Answer 5

我建议你使用jquery中的$ .when函数并行执行这两个方法，然后再执行操作。请参阅下面的代码，

var json1 = [], json2 = [];

$.when(GetJson1(), GetJson2()).always(function () {
  
  //this code will execute only after getjson1 and getjson2 methods are run executed
  
  if (json1.length > 0)
    {
       $.each(json1,function(key,val){
        //code
        });
      }
  
    
  if (json2.length > 0)
    {
       $.each(json2,function(key,val){
        //code
        });
      }
  
  });

function GetJson1()
{
  
        return $.ajax({
            url: 'url1',
            type: 'GET',
            dataType: 'json',
            success: function (data, textStatus, xhr) {
                if (data != null) {
                    json1 = data;
                }               
            },
            error: function (xhr, textStatus, errorThrown) {
                json1 = [];//just initialize to avoid js error
            }
}

function GetJson2()
{
  return $.ajax({
            url: 'url2',
            type: 'GET',
            dataType: 'json',
            success: function (data, textStatus, xhr) {
                if (data != null) {
                    json2 = data;
                }               
            },
            error: function (xhr, textStatus, errorThrown) {
                json2 = [];//just initialize to avoid js error
            }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 6

每个AJAX调用返回的数据在其自己的回调函数之外不可用。我确定有更优雅（复杂？）的解决方案，但是一些简单的Occamic解决方案包括全局变量，或者将接收到的数据存储在隐藏的输入元素中。

在每个回调函数中，只需循环直到另一个调用的数据出现：

function getJson1(){
    $.getJSON('url1',function(data){
        var d2 = '';
        $('#hidden1').val(data);
        while ( d2 == '' ){
            //you should use a time delay here
            d2 = $('#hidden2').val();
        }
        getJson2();
    });
}
function getJson2(){
    $.getJSON('url2',function(d2){
        var d1 = '';
        $('#hidden2').val(d2);
        while ( d1 == '' ){
            //you should use a time delay here
            d1 = $('#hidden1').val();
        }
        //Do stuff with json1 and json2 data
    });
}
getJson1();

如何从两个不同的来源提取JSON数据？

6 个答案: