离子。 Return 工厂来自 JSON 文件的数据

Question

我正在研究 Ionic 示例项目，正在寻找一种从 json 文件中提取数据的方法，而不仅仅是项目中的标准数组。

我已成功修改 services.js 以从 JSON 获取数据，但我的模板无法获取数据。我认为这是因为它在 JSON 的 http 请求完成之前执行。

我需要做什么才能完成这项工作？

........
.factory('People', function($http) {
  // Might use a resource here that returns a JSON array
  var people = $http.get('../data/peopleData.json').success(function(response){
    console.log(response.people); //the data is correctly logged
    return response.people;
  });

  // var people = [{
  //   id: 0,
  //   name: 'Kassiopi'
  // }, {
  //   id: 1,
  //   name: 'Imerola Bay'
  // }];
  //original and works great
return {
    all: function() {
      return people;
    },

    get: function(personId) {
      for (var i = 0; i < people.length; i++) {
        if (people[i].id === parseInt(people)) {
          return people[i];
        }
      }
      return null;
    }
  };

在控制器中：

$scope.people = People.all();

Answer 1

基本上你想 return 来自服务 Harbours 的数据，你正在 ajax 上使用回调并尝试 return 来自回调的数据是主要的当前代码中的威胁。在您的工厂中，您需要 return 具有承诺的 $http.get 函数，当 ajax 完成时，它会调用 .then 具有 response 的函数，其中包含data、status、headers & statusText。要访问数据，您可以使用 response.data 并从服务中执行 return。

工厂

.factory('Harbours', function($http) {
  // Might use a resource here that returns a JSON array
  var people = return $http.get('../data/peopleData.json').then(function(response){
    data = response.data;
    console.log(data.people); //the data is correctly logged
    return data.people;

  });

  return {
     all: function() {
        return people;
     },
     //other code here
  };
});

您当前的代码有 $scope.people = People.all();，它只不过是分配 People.all()，它什么都不做，这不是 promises 和 async 调用工作的方式。您需要执行以下步骤和代码才能使您的代码正常工作。

要从控制器访问数据，您需要在服务 people 方法上再次使用 .then 函数，其中 return 是 promise。基本上控制器 .then 函数将在数据

控制器

app.controller('myCtrl', function(Harbours, $scope){
   //this will call people of Harbours service
   //.then function will get call once the people function, 
   //resolves its promise and return a data
   Harbours.all().then(function(data){ //success callback
       console.log(data); //you will have your data here.
       $scope.people = data;
   },function(error){ //error callback
       console.log(error);//error occurred here
   })
})

我建议你阅读 How Promises work

Answer 2

您没有进入控制器，因为在执行 $scope.people = People.all(); 后正在获取数据，因为您在这里进行异步调用。所以使用 angular.

的 $q 服务的延迟

.factory('People', function($http, $q) {
     var people = function () {
        var deffered = $q.defer();
        $http({
          method: 'GET',
          url: '../data/peopleData.json'
        }).success(function (data, status, headers, config) {
          deffered.resolve(data);
        }).error(function (data, status, headers, config) {
          deffered.reject(status);
        });

        return deffered.promise;
      };

以及工厂变更return

  return {
    all: people,

现在 people 将 return 您在控制器中承诺，您可以通过这种方式从中获取数据

 var peoplePromise =  People.all();
 peoplePromise.then(function(response){
  $scope.people = response; //assign data here to your $scope object
},function(error){
  console.log(error);
})

离子。 Return 工厂来自 JSON 文件的数据

Ionic. Return factory from data from JSON file

angularjs

angular-http

ionic-framework