AngularJS：$ http從外部文件中獲取Json

Question

我是一個新手，角度不夠強，而且在JavaScript中不太強大。我正在嘗試使用離子框架來製作應用程序。即時通訊嘗試從json文件中獲取列表。我已經成功地使用了變量中的原始json。但我現在試圖使用$http.get()從我的項目文件夾中的遠程文件中檢索它。

.service('staffServices', ['$q', '$http', staffService]); 

function staffService($q, $http) { 
    var staffs = {}; 
    var promise = $http.get("/js/jsons/settings.json") 
    .success(function(response) { 
    staffs = response.staffSettings; 
    console.log(staffs); //HAS WHAT I NEED 
    }); 
    console.log(staffs);  //EMPTY OBJECT 


    return { 
    loadAllSettings: function() {   
     return $q.when(staffs);   
    }, 
    query: function (params) { 
     return filterFilter(staffs, params); 
    }, 
    get: function (params) { 
     return this.query(params)[0]; 
    } 
    } 
}; 

出於某種原因，我不能.success()功能的外部訪問的結果。我不確定這是否是由於我對javascript或我的新手狀態的無知。請幫助我

這是我的控制器下面。 self.settings永遠不會被填充，總是返回一個空的對象

.controller("staffCtrl", function (staffServices) { 
    var self = this; 

    self.settings = []; 
    staffServices.loadAllSettings() 
    .then(function (settings) { 
    self.settings = [].concat(settings); 
    console.log(settings); 
    }); 
}); 

Answer 1

我相信問題是你如何處理$q和承諾，你也可以試試這個：

// Removed irrelevant return functions temporarily 
.service('staffServices', ['$q', '$http', staffService]); 

function staffService($q, $http) { 
    var deferredPromise = $q.defer(); 
    var staffs = {}; 
    var promise = $http.get("/js/jsons/settings.json") 
    .success(function(response) { 
     staffs = response.staffSettings; 
     console.log(staffs); 
     deferredPromise.resolve(staffs); 
    }) 
    .error(function(){ 
     deferredPromise.reject(); 
     console.log('Unsucessful json call'); 
    }); 

    return { 
     loadAllSettings: function() { 
      return deferredPromise.promise; 
     } 
    } 
}; 

.controller("staffCtrl", function (staffServices) { 
    var self = this; 
    self.settings = []; 
    staffServices.loadAllSettings() 
    .then(function (settings) { 
     console.log(settings); 
     self.settings = [].concat(settings); 
    }); 
}); 

Answer 2

的$ http.get調用是異步的，所以當你調用.success回調內部的console.log，那statment實際上並沒有「發生」，直到$ http.get請求已解決。

第二次在.success語句之外調用console.log時，get請求尚未解析，因此staffs仍然是它在開始處的同一個空變量。

如果這個答案對你沒有意義，或者你不熟悉異步的東西，我可以推薦你檢查this question它很好地解釋異步調用。

至於JSON沒有正確返回，我認爲$ q.when（來自loadAllSettings（）函數）應該返回一個promise，當它返回JSON對象staffSettings時。要對返回的語句使用.then調用，它需要是一個承諾。嘗試設置人員等同於響應，然後檢索控制器中的.staffSettings屬性。

.controller("staffCtrl", function (staffService) { 
    var self = this; 

    self.settings = []; 
    staffService.loadAllSettings() 
    .then(function (settings) { 
    self.settings = [].concat(settings.staffSettings); 
    console.log(settings); 
    }); 
});