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端点，以便服务器可以预过滤数据。如果数据集不大，您可以使用角度过滤器并从工厂缓存结果集。

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

Answer 2

正如@Lee Winter所说，因为JavaScript是异步的，所以代码不会等待加载JSON数据。

我的建议是使用这样的承诺

<强>工厂

.factory('Noticias', function($http) { 
  
  var noticias;
  
  function all()
  {
    // use 'then' instead of 'success'
    return $http.get('jsonfile').then(function(response) 
    {
      // hold data in factory variable 
      noticias = response.data;
      // return data to caller
      return response.data;
    });
  }
  
  function find(id) {
    var i; 
    for(i = 0; i < noticias.length; i++)
    {
      if(noticias[i].id === id)
        return noticias[i];
    }
    
    return null;
  }
  
  return {
    all: all,
    find: find
  }
});

<强>控制器

.controller('DashCtrl',function($scope, Noticias) {
    // retrive data from factory through promise
    Noticias.all().then(function(data){ $scope.noticias = data; });

});

从工厂获取JSON数据

2 个答案: