AngularJS controller not displaying data from array

Question

I'm currently working on some code in Angular which loads a list of blogposts to a website. I have a module and controller, and have an ng-repeat loop set up to iterate through a json which acts as an index for a bunch of html files. However, the tags which should be outputting data from my index object are all empty on the final page.

app.js:

var PersonalApp = angular.module('PersonalApp', [
  'ngRoute',
  'MasterCtrl'
]);

PersonalApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/blog', {
        templateUrl: 'partials/blog.html',
        MasterCtrl: 'MasterCtrl'

      }).
      when('/about', {
        templateUrl: 'partials/about.html',
        MasterCtrl: 'MasterCtrl'

      }).
      when('/projects', {
        templateUrl: 'partials/about.html',
        MasterCtrl: 'MasterCtrl'

      }).
      when('/contact', {
        templateUrl: 'partials/about.html',
        MasterCtrl: 'MasterCtrl'

      }).
      otherwise({
        redirectTo: '/blog'
      });
  }]);

MasterCtrl.js:

var MasterCtrl = angular.module('MasterCtrl', []);

MasterCtrl.controller('MasterCtrl', ['$scope', '$http',
    function ($scope) {
        $.ajax({
            url: '../BlogPosts/posts.json',
            dataType: 'json',
            success: function (bposts) {
                $scope.bposts = (bposts);
                bposts = JSON.stringify(bposts)
                console.log(bposts);
            }
        });
    }]);

blog.html:

<article ng-repeat="posts in bposts" class="post-173 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized masonry-brick" style="position: absolute; left: 0px; top: 0px;">
                <div class="item-sizer">

                    <header class="entry-header blog-entry-header">

                        <div class="entry-data">
                            <span class="posted-on">
                                <a ng-href="/../BlogPosts/{{posts.ID}}" rel="bookmark">
                                    <time class="entry-date published updated" datetime="2015-08-20T02:48:02+00:00">{{posts.ID}}</time>
                                </a>
                            </span>

                        </div>
                        <h1 class="entry-title"><a ng-href="/../BlogPosts/{{posts.ID}}" rel="bookmark">{{posts.Title}}</a></h1> </header><!-- .entry-header -->
                        {[posts.ID}}

                    <div class="entry-content">
                        <p>{{posts.Summary}}<a class="read-more" ng-href="/../BlogPosts/{{posts.ID}}">Continue reading</a></p>
                    </div><!-- .entry-content -->
                </div>
            </article>

Here is the console output of my originally jQuery:

{"posts":[{
    "ID":"441770384",
    "Title":"TestPost",
    "Summary":"Doot Doot",
    "Thumb":"null"
},{
    "ID":"1441835958",
    "Title":null,
    "Summary":"null",
    "Thumb":"‌null"
},{
    "ID":"1441836000",
    "Title":null,
    "Summary":"null",
    "Thumb":"null"
},{
    "ID":"14‌41836039",
    "Title":"dfasdf",
    "Summary":"null",
    "Thumb":"null"
}]}

use $http instead of $.ajax so you don't have to use $apply() for each request. Angular doesn't know about $.ajax so you have to tell it to run digests when you change scope. — charlietfl
– charlietfl, Commented Sep 22, 2015 at 3:56
Congrats on separating your app into modules, it's a rare site on StackOverflow. You'll find it much easier to work with — Phil
– Phil, Commented Sep 22, 2015 at 4:02

Phil · Accepted Answer · 2015-09-22 04:17:16Z

1

You seem to be using jQuery's .ajax method instead of $http. Using jQuery won't trigger a digest cycle and as such, your scope changes won't be reflected in your templates. Use $http instead...

Simply change your "MasterCtrl" controller to

.controller('MasterCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('../BlogPosts/posts.json').then(function(response) {
            $scope.bposts = response.data.posts;
        });
    }]);

and try to avoid using jQuery in Angular apps.

See $apply() for more information about the digest cycle and what you should do if you insist on using third party libraries like jQuery.

edited Sep 22, 2015 at 4:17

answered Sep 22, 2015 at 3:58

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

VivaLaPanda Over a year ago

I had this originally, but it wasn't working either. Just tried your code and it didn't work.

Phil Over a year ago

@AdrianSmith "didn't work" isn't a very good problem description. What does the data in posts.json look like?

VivaLaPanda Over a year ago

Using your version of the code had no change on what the actual page looks like. Here is the console output of my originally jQuery: {"posts":[{"ID":"441770384","Title":"TestPost","Summary":"Doot Doot","Thumb":"null"},{"ID":"1441835958","Title":null,"Summary":"null","Thumb":"null"},{"ID":"1441836000","Title":null,"Summary":"null","Thumb":"null"},{"ID":"1441836039","Title":"dfasdf","Summary":"null","Thumb":"null"}]}

VivaLaPanda Over a year ago

Console output is also identical after using your code.

Phil Over a year ago

@Romulo $scope.$apply() will throw an error in my answer. It is totally unnecessary here

|

Romulo · Accepted Answer · 2015-09-22 04:02:37Z

0

Since you are retrieving your data using JQuery ($.ajax), you have to invoke the $scope.$apply() so AngularJS can create the binding and update your view.

You can check When to use $scope.$apply() for more info.

answered Sep 22, 2015 at 4:02

Romulo

5,1542 gold badges21 silver badges31 bronze badges

4 Comments

VivaLaPanda Over a year ago

Where would I use that?

Romulo Over a year ago

You should use that after you assign the retrieved data to your scope variable. In your case that would be after $scope.bposts = (bposts);

VivaLaPanda Over a year ago

I switched to the non-jQuery version of the code as suggested by @Phil, but the same issue is still occurring.

Phil Over a year ago

OP shouldn't be using $.ajax at all, especially since they're even injecting the $http service.

Collectives™ on Stack Overflow

AngularJS controller not displaying data from array

2 Answers 2

10 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related