0

Tenho um arquivo json com a seguinte estrutura de exemplo:

{"status":"ok","count":2,"count_total":54,"pages":27,"posts":[{"id":894,"type":"post","slug":"titulo-1","url":"url-titulo-1.html","status":"publish","title":"Tu00edtulo 1","content":"<p>Teste de texto 1<\/p>","date":"2016-10-13 16:24:36","modified":"2016-10-18 16:04:11","categories":[{"id":9,"slug":"historias","title":"Hist\u00f3rias","description":"","parent":0,"post_count":7}],"tags":[],"author":{"id":1,"slug":"ivan","name":"Ivan","first_name":"Ivan","last_name":"Ferrer","nickname":"Ivan","url":"","description":""},"comments":[],"attachments":[],"comment_count":0,"comment_status":"open","custom_fields":{}},{"id":895,"type":"post","slug":"titulo-2","url":"url-titulo-2.html","status":"publish","title":"Tu00edtulo 2","content":"<p>Teste de texto 2<\/p>","date":"2016-10-14 10:20:21","modified":"2016-10-18 19:02:11","categories":[{"id":9,"slug":"historias","title":"Hist\u00f3rias","description":"","parent":0,"post_count":7}],"tags":[],"author":{"id":1,"slug":"ivan","name":"Ivan","first_name":"Ivan","last_name":"Ferrer","nickname":"Ivan","url":"","description":""},"comments":[],"attachments":[],"comment_count":0,"comment_status":"open","custom_fields":{}}]}

Ocorre que gostaria de trabalhar a consulta no service e não no controller, gostaria de carregar uma única vez a Promise, ao chamar o serviço "News" no meu controller, e depois usar os métodos de exibição na view.

Service:

angular.module('starter.services', [])
.factory('News', function($http) {
  this.promiseRtn = function() {
    return $http.get('/path/data.json').then(function (response) {
      return response.data.posts;
    });
  }
  var promise = this.promiseRtn();
   console.log(promise.$$state);
   console.log(promise); 
   /* no console log a promisse está trazendo os dados,
      mas eu não sei como acessar os dados no retorno abaixo,
      pois ele traz o objeto num formato diferente 
      o qual desconheço (veja na imagem abaixo): */ 
  return {
    getAll: function() {
      return promise;
    },
    getById: function(idNews) {
      for (var i = 0; i < promise.length; i++) {
        if (promise[i].id === parseInt(idNews)) {
          return promise[i];
        }
      }
      return null;
    }
};

});

Controller:

angular.module('starter.controllers', [])
.controller('HomeCtrl', function($scope, News) {
    $scope.noticias = News.getAll();
})
.controller('NoticiaCtrl', function($scope, News, $stateParams) {
    $scope.noticia = News.getById($stateParams.idNews);
});

O que não quero:

Antes ele funcionava assim no meu controller, passando a responsabilidade da requisição para o controller a cada chamada da view, deixando tudo muito lento:

//chamava e esperava o retorno no then
 News.getAll().then(function (data) {
    $scope.noticias = data;
  });

 //chamava e esperava o retorno no then passando a ID
 News.getById($stateParams.idNews).then(function (data) {
  $scope.noticia = data;
 });

E dentro do serviço estava assim:

return {
        getAll: function() {
          function() {
            return $http.get('/path/data.json').then(function (response) {
                   return response.data.posts;
            });
        },
        getById: function(id) {
          function(id) {
            return $http.get('/path/data-'+id+.'.json').then(function (response) {
                   return response.data.post;
            });
        },

Porém eu tinha que fazer a consulta toda vez que executava um destes métodos getAll(), getById(), deixando ele bem lento.

Como está vindo o objeto:

inserir a descrição da imagem aqui

1 Resposta 1

0

Resolvi o problema no service, usando $rootScope para preservar a "collection" da primeira consulta, e $q.defer(), para atrasar o retorno enquanto não for atendida a "collection" da "Promise":

.factory('News', function ($http, $q, $rootScope) {
    var services = {
                    getById: getById,
                    getAll: getAll
                   };

    return services;
    $rootScope.collection = [];

    function getAll() {
        return $http.get('/path/data.json', { cache: true })
               .then(getAllComplete, getAllFail);
        function getAllComplete(response) {
            $rootScope.collection = response.data.posts;
            return response.data.posts;
        }

        function getAllFail(error) {
            console.error(error);
        }
    }

    function getById(id) {
        if ($rootScope.collection) {
            var deferred = $q.defer();
            for (var i = 0; i < $rootScope.collection.length; i++) {
                if ($rootScope.collection[i].id === parseInt(id)) {
                    deferred.resolve($rootScope.collection[i]);
                    break;
                }
            }
         return deferred.promise;
        }
        //caso a promise não seja atendida, o método abaixo é retornado:
         return $http.get('/path/data-'+id+'.json', { cache: true })
            .then(getByIdComplete, getByIdFail);

         function getByIdComplete(response) {
             return response.data.post;
         }

         function getByIdFail(error) {
             console.error(error);
         }
     }
});

E no controller, eu mantive o .then() como estava, exemplo:

News.getById($stateParams.idNews).then(function(data) {
    $scope.noticia = data;
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .