离子。从JSON文件数据返回工厂 [英] Ionic. Return factory from data from JSON file

问题描述

我和离子样本项目玩弄和正在寻找一种方式将数据拉从JSON文件，而不是仅仅的标准数组，它是在项目中。

我已成功修改services.js抢从JSON数据，但我的模板没有得到数据。我想这是因为它执行的JSON HTTP请求完成之前。

什么我需要做的，使这项工作？

  ........
.factory（'人民'，函数（$ HTTP）{
  //可能会利用这里的资源，返回一个JSON数组
  变种人= $ http.get（'../数据/ peopleData.json'）。成功（功能（响应）{
    的console.log（response.people）; //数据被正确记录
    返回response.people;
  }）;  //变种人= [{
  // ID：0，
  //名称：'卡西奥皮
  //}，{
  // ID：1，
  //名称：'Imerola湾
  //}];
  //原来的伟大工程
返回{
    所有：功能（）{
      返回的人;
    }，    得到：函数（PERSONID）{
      对于（VAR I = 0; I＆LT; people.length;我++）{
        如果（人[I] .ID === parseInt函数（人））{
          返回的人[我]
        }
      }
      返回null;
    }
  };
 

在控制器：

  $ scope.people = People.all（）;
 

解决方案

您还没有得到控制，因为数据后 $ scope.people = People.all（被获取）; 为您做异步调用在这里被执行。因此，从 $ Q 的角度服务延迟使用。

  .factory（'人民'，函数（$ HTTP，$ Q）{
     变种人=功能（）{
        变种递延= $ q.defer（）;
        $ HTTP（{
          方法：GET，
          网址：'../data/peopleData.json
        }）。成功（功能（数据，状态，头，配置）{
          deffered.resolve（数据）;
        }）错误（功能（数据，状态，头，配置）{
          deffered.reject（状态）;
        }）;        返回deffered.promise;
      };
 

和工厂的回报变化

  {回报
    所有人，
 

现在人将返回在控制器的承诺，从中可以获取数据这样

  VAR peoplePromise = People.all（）;
 peoplePromise.then（功能（响应）{
  $ scope.people =响应; //此处的数据分配到$ scope对象
}，功能（错误）{
  的console.log（错误）;
}）
 

I'm playing around with Ionic sample projects and am looking for a way to pull in the data from a json file rather than just the standard array that is in the project.

I have successfully modified services.js to grab the data from the JSON but my template does not get the data. I assume this is because it executes before the http request for the JSON has completed.

What do I need to do to make this work?

........
.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;
    }
  };

In the controller:

$scope.people = People.all();

解决方案

You are not getting in controller because data is being fetched after $scope.people = People.all(); is executed as you are making async call here. So use defer from $q service of angular.

.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;
      };

And change in factory return

  return {
    all: people,

Now people will return you promise in controller , from which you can get data this way

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

这篇关于离子。从JSON文件数据返回工厂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！