Массив объектов AngularJS не отображается, но получен

Невозможно отобразить массив объектов JSON, извлеченных с сервера, хотя он получен OK. Похоже, что отображение HTML выполняется до инициализации контроллера AngularJS. Как я могу отображать данные, полученные с сервера? Вот мой код:Массив объектов AngularJS не отображается, но получен

app.js


    var carApp = angular.module('carsApp', ['ngResource', 'carsApp.services', 'carsApp.controllers']);

carcontroller.js


    angular.module('carsApp.controllers', ['ngResource']); 

    carApp.controller('CarController', function($scope, CarService) { 
     $scope.items = [ 
         {"id":1,"model":"S600","manufacturer":"Mercedes","price":1000.52}, 
         {"id":2,"model":"S80","manufacturer":"Volvo","price":500.27} 
         ]; 
     console.log("Static $scope.items = " + JSON.stringify($scope.items)); 
     $scope.cars = CarService.getCars(); 
     console.log("Non-static $scope.cars = " + JSON.stringify($scope.cars)); 
    });

carservice.js


    angular.module('carsApp.services', ['ngResource']).factory('CarService', function ($http) { 
     return { 
      getCars: function() { 
        $http({ method: 'GET', url: '/cars/' }) 
         .success(function (data, status, headers) { 
          console.log('Data in service'); 
          console.log(data); 
         }) 
         .error(function (data, status, header) { 
          console.log('error'); 
         }); 
      } 
     } 
    });

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Cars View</title> 
    <script type="text/javascript" src="./bower_resources/angular/angular.min.js"></script> 
    <script type="text/javascript" src="./bower_resources/angular-route/angular-route.min.js"></script> 
    <script type="text/javascript" src="./bower_resources/angular-resource/angular-resource.min.js"></script> 

    <script type="text/javascript" src="./app/app.js"></script> 
    <script type="text/javascript" src="./app/controllers/carcontroller.js"></script> 
    <script type="text/javascript" src="./app/services/carservice.js"></script> 

    <link rel="stylesheet" href="./bower_resources/bootstrap-css-only/css/bootstrap.min.css" /> 
</head> 
<body> 
    <div ng-app="carsApp"> 
     <div ng-controller="CarController"> 
      <h4>Table content</h4> 
      <table> 
       <tr> 
        <th ng-repeat="(key, val) in cars[0]">{{key}}</th> 
       </tr> 
       <tr ng-repeat="car in cars"> 
        <td ng-repeat="(key, val) in car">{{val}}</td> 
       </tr> 
      </table> 
      <h4>Cars list content</h4> 
      <ul ng-repeat="car in cars"> 
       <li>{{car.manufacturer}}</li> 
      </ul> 
      <h4>Items list content</h4> 
      <ul ng-repeat="something in items"> 
       <li>{{something.manufacturer}}</li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

РЕЗУЛЬТАТ:

источник

2015-12-28 t3rmin41

Ваш 'getCars()' функция ничего не вернуть. – rlecaro2

Чтобы быть более конкретным, вы должны вернуть обещание (или передать и вызвать обратный вызов, который фактически не требует возврата чего-либо) для обработки асинхронного вызова – aw04

Спасибо aw04, ваша информация о обещании (который мне нужен для Google) была ценной начать с. – t3rmin41

, необходимые для изменения carcontroller.js и carservice.js следующим образом:

carcontroller.js


angular.module('carsApp.controllers', ['ngResource']); 

carApp.controller('CarController', function($scope, CarService) { 
    CarService.getCars() 
      .then(
       function(response) { 
        $scope.cars = response.data; 
        console.log("$scope.cars inside CarService call = " + JSON.stringify($scope.cars)); 
       }, 
       function(error) { 
        $scope.hasErrors = true; 
       } 
      ); 
});

carservice.js


angular.module('carsApp.services', ['ngResource']).factory('CarService', function ($http, $q) { 
    return { 
     getCars : function(carId) { 
      var promise; 
      promise = $http({ method : 'GET', url : '/cars/', isArray : true }) 
        .success(function (data, status, headers) { 
         console.log('Data in service'); 
         console.log(data); 
        }) 
        .error(function (data, status, header) { 
         console.log('error'); 
        }); 
      return promise; 
     } 
    } 
});

Теперь это все работает

источник

2015-12-29 09:03:23 t3rmin41

Use promise chaining.

Пожалуйста, сделайте это изменения.

carservice.js

getCars: function() { 

        var objDefer = $q.defer(); 
        $http({ method: 'GET', url: '/cars/' }) 
         .success(function (data, status, headers) { 
          objDefer.resolve(data); 
         }) 
         .error(function (data, status, header) { 
          console.log('error'); 
         }); 
      }

carcontroller.js

CarService.getCars().then(function(){ 

    console.log("Non-static $scope.cars = " + JSON.stringify($scope.cars)); 
}, 
function(){ 
// error 
});

источник

2015-12-29 10:00:42

Массив объектов AngularJS не отображается, но получен

ответ

Смежные вопросы