javascript - 从工厂获取 JSON 数据

Question

我得到了这个 controller.js 文件:

.controller('DashCtrl',function($scope, Noticias) {

  $scope.noticias = Noticias.all();

});

他们还有其他带有 services.js 的文件:

.factory('Noticias', function($http) {

  noticias = [];

   $http.get('noticias.json').success(function(data)
   {
       noticias = data;

   });

  return {
    all: function() {

      return noticias;
    },
    get: function(noticiaId) {

      for (var i = 0; i < noticias.length; i++) {
        if (noticias[i].id === parseInt(noticiaId)) {

          return noticias[i];
        }
      }
      return null;
    }
  };
});

我的 JSON 文件是:

[{
    "id": "0",
    "title": "Esta es una noticia de dos lineas principal",
    "type": "Evento",
    "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "schedule": "ABRIL, 14 2:56 AM",
    "img": "img/news1.png"
  }, {
   "id": "1",
    "title": "Fin de semana de Madres",
    "type": "Noticia",
    "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "schedule": "MARZO, 14 2:56 AM",
    "img": "img/news2.png"
  }, {
    "id": "2",
    "title": "Eminem en vivo, 10% off",
    "type": "Evento",
    "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "schedule": "JUNIO, 14 2:56 AM",
    "img": "img/news3.png"
  }, {
    "id": "3",
    "title": "12 cosas para comprar",
    "type": "Noticia",
    "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
   "schedule": "JUNIO, 14 2:56 AM",
    "img": "img/news5.png"
}]

控制台没有显示错误，但是没有加载数据，请问有什么帮助吗？我被这个卡住了一天!

Answer 1

Controller .js

.controller('DashCtrl',function($scope, Noticias) {

    Noticias.all(function(data){
        $scope.noticias = data;
    });

});

服务

 .factory('Noticias', function($http) {

  return {
    all: function(callback) {

        $http.get('noticias.json').success(function(data)
        {
           callback(data);
        });

    },
    get: function(noticiaId) {

      for (var i = 0; i < noticias.length; i++) {
        if (noticias[i].id === parseInt(noticiaId)) {

          return noticias[i];
        }
      }
      return null;
    }
  };
});

本质上，您的网络调用需要时间，并且您会立即请求数组。通过在完成时向其询问数据时传递回调。

编辑: 至于您的 get 函数，这可能需要另一个接受 noticiaid 参数的 json 端点，以便服务器可以预过滤数据。如果数据集不大，您可以使用 Angular 过滤器并缓存来自工厂的结果集。

Storing Objects in HTML5 localStorage (如果您不想服务器过滤但有限制，则客户端缓存示例)