通過或返回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