通过或返回JSON对象从jQuery获取

Question

我有一个函数，使嵌套的JSON对象的GET请求。该对象成功返回，但不能访问返回对象内的其他对象。

物体看起来是这样的：

{ 
    "student": { 
     "hobbies": ["reading", "dancing", "music"], 
     "subjects": ["english", "maths", "science"] 
    } 
} 

，这是功能：

var superObject = { 

    getData: function(obj) { 
     $.get(obj.target, function(callbackObject) { 
      // It works fine if i log callbackObject 
      // console.log(callbackObject); 
      return callbackObject; 
     } 
    }, 

    useData: function() { 
     var data = superObject.getData({'target': 'file.json'}); 
     var hobbies = data.student.hobbies; 
     console.log(hobbies); // This fails and returns nothing. 
    } 
} 

Answer 1

的问题是，你回来从$不用彷徨回调callbackObject，而不是从你的getData功能。 $ .get是异步，所以它的回调不会触发，直到getData()完成后很长时间。这就是为什么你看到未定义。

什么是这样的：

var superObject = { 
    getReuslts: {}, 

    getData: function(obj) { 
     $.get(obj.target, function(callbackObject) { 
      getReuslts = callbackObject; 
      this.useData(); 
     } 
    }, 

    useData: function() { 
     var hobbies = getReuslts.student.hobbies; 
     console.log(hobbies); 
    } 
} 

当然，这会造成useData和的getData之间的时间依赖性。为什么不在一个函数中创建这个对象，所以你可以添加一些封装？

funcition getSuperObject = { 
    var result = {}; 
    var getReuslts = {}; 

    function useData() { 
     var hobbies = getReuslts.student.hobbies; 
     console.log(hobbies); 
    } 

    result.getData = function(obj) { 
     $.get(obj.target, function(callbackObject) { 
      getReuslts = callbackObject; 
      useData(); 
     }); 
    }; 
    return result; 
} 

或提供您自己的回调：

var superObject = {  
    getData: function(obj, callback) { 
     $.get(obj.target, function(callbackObject) { 
      if (callback) 
       callback(calbackObject); 
     }); 
    } 
} 

然后

superObject.getData({'target': 'file.json'}, function(result) { 
    var hobbies = result.student.hobbies; 
    console.log(hobbies); // This fails and returns nothing. 
}); 

Answer 2

$.get工作异步：你怎么称呼它，然后在浏览器熄灭发出请求。 同时，您的代码继续运行。当浏览器从服务器获得响应时，它会调用您提供的回调函数，并将结果传递给它。

这意味着当getData运行时，它会返回“几乎立即”和由$.get开始请求仍然会在进步的背景。因此，getData不能返回任何有意义的呼叫者，因为它只能将时间表作为请求;它无法知道结果会是什么。

所以它遵循你不能叫getData这样的：

var data = superObject.getData({'target': 'file.json'}); 

你需要做的，而不是什么放在依赖于回调中的响应代码：

$.get(obj.target, function(data) { 
    var hobbies = data.student.hobbies; 
    console.log(hobbies); // This will now work 
} 

Answer 3

范围您的变量只在您的功能中 您可以尝试在您的结构中设置变量爱好，并将其值设置为您的功能

var hobbies; //global scope 
var superObject = { 
getData: function(obj) { 
$.get(obj.target, function(callbackObject) { 
    // It works fine if i log callbackObject 
    // console.log(callbackObject); 
    return callbackObject; 
}}, 

useData: function() { 
var data = superObject.getData({'target': 'file.json'}); 
hobbies= data.student.hobbies; 
//set it's value 
} 
} 

Answer 4

由于异步 Ajax行为，需要通过回调函数执行一次，通过Ajax检索到的数据可用;例如：

getData: function(obj, callback) { 
    $.get(obj.target, function(callbackObject) { 
     callback.call(null, callbackObject); 
    } 
} 

useData: function() { 
    superObject.getData({'target': 'file.json'}, function(data) { 
     var hobbies = data.student.hobbies; 
    }); 
} 

Answer 5

您正在返回回调处理程序。所以你的结果被发送到回调调度程序，它将放弃你的结果。你需要做的是附上您的处理代码的get回调：

getData: function(obj) { return $.getJSON(obj.target); }, 
useData: function() { 
    getData({ target : 'file.json'}).then(function(results) { 
    var hobbies = results.student.hobbies; 
    console.log(hobbies); 

    } 
} 

Answer 6

你可以把你的异步AJAX调用是同步的。请参阅http://api.jquery.com/jQuery.ajax/，主要是“异步”选项。

看到这个讨论：

Ajax jquery synchronous callback success