AngularJS ng-repeat is not looping through array

Question

I am trying to build a loop with ng-repeat but can't iterate over an array of objects. It seems like the loop is not running at all.

I started a jsfiddle - http://jsfiddle.net/a2xhzbfm/1/

Below is an example of data ($scope.postData) that I'm working with:

[
    {
        "Title" : "Test1",
        "Content" : "<div class=\"ExternalClass53DA82296DEE49898B93B8E59F9074BD\"><p>This is a test post.</p></div>",
        "ImagePath" : "url",
        "Text" : "Apple",
        "Link" : "http://www.apple.com/",
        "Created" : "/Date(1436889599000)/"
    }, {
        "Title" : "Test2",
        "Content" : "<div class=\"ExternalClass53DA82296DEE49898B93B8E59F9074BD\"><p>This is a test post.</p></div>",
        "ImagePath" : "url2",
        "Text" : "Apple2",
        "Link" : "http://www.apple.com/",
        "Created" : "/Date(1436889599000)/"
    }
]

In the JS I'm calling an api that returns a JSON and then storing that in $scope.postData variable.

var app = angular.module('blogApp',[]);
app.controller('blogController', function($scope){
    console.log('Angular is go!');
    $scope.postData;

    $.ajax({
        url: 'someURL',
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            $scope.postData = data.d.results;
            console.log($scope.postData);


        },
        error: function (data) {
            console.log(data.responseJSON.error);
        }
    });
});

Here is what I have for HTML so far. I'll add more divs once I can get the data to print.

<body ng-app="blogApp">
    <div ng-controller="blogController" class="container">
        <div class="row">
            <div ng-repeat="post in postData">
                <div ng-repeat="(key, val) in post">
                    {{key}}:{{val}}There has to be something else!!!
                </div>
            </div>
        </div>
    </div>
</body>

Thanks in advance!

Seems to work just fine. jsBin. Maybe you need to add $scope.apply() in your AJAX success callback since you aren't using Angular's implementation of AJAX. Reference. — Brett
– Brett, Commented Jul 23, 2015 at 16:13

Josiah Keller · Accepted Answer · 2015-07-23 16:16:21Z

2

It's because you're using jQuery for the Ajax. Angular doesn't know that you changed $scope.postData. If you use Angular's own Ajax service, $http, it will automatically handle updating the view after you make changes to $scope. But since Angular doesn't have any control over jQuery, there's no way for it to detect the update.

The right way to fix this is to use $http, but a wrong way that should work is to call $scope.$apply() in your success callback right after you modify $scope.postData.

edited Jul 23, 2015 at 16:16

answered Jul 23, 2015 at 16:09

Josiah Keller

3,6854 gold badges25 silver badges36 bronze badges

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

Comments

Daniel Hutton · Accepted Answer · 2015-07-23 16:14:08Z

1

Try switching your Ajax call to Angular's own $http function like so:

$http.get('someURL', {
    headers: {
        "Accept": "application/json; odata=verbose"
    }
}).success(function(data) {
    $scope.postData = data.d.results;
    console.log($scope.postData);
});

It's always recommended to use Angular's built in functions unless you need to use external libraries for cases where these functions aren't enough.

answered Jul 23, 2015 at 16:14

Daniel Hutton

1,4551 gold badge18 silver badges33 bronze badges

Comments

Stepan Suvorov · Accepted Answer · 2015-07-23 16:11:32Z

0

1 ) First you need to update version of AngularJS

2 ) You have a misprint not in post but postData

check it:

 <div ng-repeat="(key, val) in postData">
    {{key}}:{{val}}There has to be something else!!!
 </div>

http://jsfiddle.net/STEVER/a2xhzbfm/3/

answered Jul 23, 2015 at 16:11

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

2 Comments

Josiah Keller Over a year ago

That's not a misprint. OP is iterating through each object in postData and then through each key/value in the object.

habibg Over a year ago

Stever thanks for the note! Will keep that mind, but I think I just had to use $http method for calling the api

Collectives™ on Stack Overflow

AngularJS ng-repeat is not looping through array

3 Answers 3

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Related