AngularJS で $.getJSON で json 取って for で回して配列に入れたら空になった場合のメモ

(AngularJS1.2.0)

問題

'use strict';

angular.module('sampleApp')
  .controller('MainCtrl', function ($scope) {
    $scope.books = [];

    $.getJSON('api/books/', function(json) {
      var _data = json.results;
      var _datum;
      for (var i = 0; i < _data.length; i++) {
        _datum = _data[i];
        $scope.books.push({name: _datum.name, comment: _datum.comment});
      }
    });
  });

for の中では取れてるのにhtmlで表示させようとすると
$scope.books が [空] になってる

解決

$apply 使って更新すればいいらしい

angularjs - Populating $scope using .getJSON() - Stack Overflow

:
      for (var i = 0; i < _data.length; i++) {
        _datum = _data[i];
        $scope.$apply(function() {
          $scope.books.push({name: _datum.name, comment: _datum.comment});
        });
      }
:

参考にしたstackoverflowのanswerで
AngularJS の $http か $resource を使えとあるが
とりあえずこれで apiサーバのデータを取って表示することができた。
~~後で直す。~~

修正

$.getJSON でなくて $http.get にしてみた

'use strict';

angular.module('sampleApp')
  .controller('MainCtrl', function ($scope, $http) {
    $scope.books = [];

    $http.get('api/books/').success(function(json) {
      $scope.books = json.results;
    });
  });

使い回すなら factory にするとよいかも