通过其他功能可用的函数加载JSON

时间:2015-03-19 16:42:22

标签: javascript jquery json

我正在尝试使用JS函数加载JSON,然后使加载的JSON对象可用于同一名称空间中的其他函数。我已经尝试使用return来提供检索到的对象数组,但这不起作用。在附加的示例中,我已将对象数组分配给命名空间对象中的属性,但是当我尝试在主loadData函数之外获取该对象数组时,我获得的所有内容都为null。

这是我的JS:

var myObj = {
	jsonEndPoint: '/test/test.json',
	dataObjects: null
}

myObj.loadData = function () {
    $.ajax({
        url: 'test.json',
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            myObj.dataObjects = data.apiResults[0].league.season.draft.rounds[0].picks;
            //console.log(myObj.dataObjects);
			

        },
        error: function (xhr, textStatus, errorThrown) {
            console.log('Data Load Error: ' + textStatus);
        }
    });

}()

myObj.displayData = function() {
	console.log(myObj.dataObjects)
}()

这里可以看到完整的示例:http://zbl.me/test/index.html 我正在加载的JSON文件位于:http://zbl.me/test/test.json

2 个答案:

答案 0 :(得分:0)

即使在ajax完成之前,也会调用displayData方法。因此,您需要在ajax的成功回调中调用displayData,或者稍微更改结构以便于调用。

为什么不做你喜欢的事呢

var myObj = {
  jsonEndPoint: '/test/test.json',
  dataObjects: null,
  displayData: function() {
    console.log(this.dataObjects);
  },
  loadData: function() {
    $.ajax({
      context: this,
      url: 'test.json',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
        this.dataObjects = data.apiResults[0].league.season.draft.rounds[0].picks;
        console.log(myObj.dataObjects);
        this.displayData();
      },
      error: function(xhr, textStatus, errorThrown) {
        console.log('Data Load Error: ' + textStatus);
      }
    });
  }
};

myObj.loadData();

这是demo

答案 1 :(得分:0)

这是因为 JavaScript本质上是异步的 - 当您尝试访问myObj.dataObjects函数中的myObj.displayData时,该对象尚不存在,因为AJAX调用具有尚未完成。

您可以做的是确保只有在使用.done()从您的AJAX调用传递$.when()承诺时,才需要运行需要AJAX调用中新添加数据的所有函数。逻辑很简单:

  1. myObj.loadData()现在专门用于进行AJAX调用。关于我们如何处理完成和失败事件(以前是.success().error()回调),我们将该逻辑委托给下一个函数。
  2. myObj.displayData()现在用于评估您使用myObj.loadData()进行的AJAX调用返回的承诺。您使用$.when()来获取承诺,然后只需链接.done()来处理成功的呼叫,.fail()来处理相反的情况:)
  3. 以下是您改进的代码:

    var myObj = {
        jsonEndPoint: '/test/test.json',
        dataObjects: null
    }
    
    myObj.loadData = function () {
        // We return the AJAX object so that we can evaluate the state later
        // This is very simple :) 
        return $.ajax({
            url: 'test.json',
            type: 'POST',
            dataType: 'json'
        });
    }()
    
    myObj.displayData = function() {
        // Instead of using the deprecated .success() and .error()
        // ... we use .done() and .fail()
        $.when(myObj.loadData).done(function(data) {
            myObj.dataObjects = data.apiResults[0].league.season.draft.rounds[0].picks;
        }).fail(function(xhr, textStatus, errorThrown) {
            console.log('Data Load Error: ' + textStatus);
        });
    }()
    

    如果您不确定,可以在这里查看虚拟代码:http://jsfiddle.net/teddyrised/5rbd2eqq/1/我使用了JSfiddle的内置JSON响应来生成人工响应,但逻辑与您的完全相同。