CODEWITHSUNDEEP
javascripthtmlangularjs
habibg
habibg

Reputation: 185

AngularJS ng-repeat is not looping through array

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!

Upvotes: 0

Views: 779

Answers (3)

Josiah Keller
Josiah Keller

Reputation: 3675

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.

Upvotes: 2

Daniel Hutton
Daniel Hutton

Reputation: 1455

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.

Upvotes: 1

Stepan Suvorov
Stepan Suvorov

Reputation: 26236

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/

Upvotes: 0

Related Questions