AngularJS using ng-repeat on a $scope array

Question

I have a controller that, through Parse, successfully retrieves and pushes an object onto an array as so:

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

mySite.controller('listConnectors', ['$scope',
    function ($scope) {
        //Parse.initialize here;
        $scope.array = [];
        var TestObject = Parse.Object.extend("TestObject");
        var query = new Parse.Query(TestObject);
        query.find({
            success: function (results) {
                alert("Successfully retrieved " + results.length + " rows.");
                // Do something with the returned Parse.Object values
                for (var i = 0; i < results.length; i++) {
                    var object = results[i];
                    alert(object.id + ' - ' + object.get('foo') + " " + object.get('num'));

                    /***** Pushing onto array here *******/
                    $scope.array.push(object);

                }

                console.log($scope.array[0].attributes.foo); //Grabbed what was needed

            },
            error: function (error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });
}]);

I am then, unsuccessfully, trying to loop and list the "foo" value of every object in the array, as the console.log above shows. However, nothing is outputted. It's as though, possibly, the ng-repeat is not being executed or entered:

    <li ng-repeat="eachElement in array">
    <a > {{eachElement.attributes.foo}}</a>
    </li>

Any help would be appreciated. Thanks!

Related: Using jQuery's $.ajax within an angularJS controller — Jonathan Lonowski
– Jonathan Lonowski, Commented Nov 20, 2014 at 22:55

Abushawish · Accepted Answer · 2014-11-21 16:16:35Z

2

I was able to fix it. Thank you Jonathan Lonowski for the comment and link.

I had to wrap the push onto array with an $apply:

$scope.$apply(function(){
  $scope.array.push(object);
});

answered Nov 21, 2014 at 16:16

Abushawish

1,4733 gold badges20 silver badges37 bronze badges

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

Comments

James Talmage · Accepted Answer · 2014-11-20 22:54:26Z

1

The code in your alert statement and inside the ng-repeat directive do not match. Your alert accesses "x.id" whereas your dom binding accesses "x.attributes.id".

If your alert is showing the expected result, you should change the HTML as follows:

<li ng-repeat="eachElement in array">
<a > {{eachElement.id}}</a>
</li>

answered Nov 20, 2014 at 22:54

James Talmage

3281 silver badge6 bronze badges

7 Comments

Abushawish Over a year ago

My 'console.log($scope.array[0].attributes.foo); //Grabbed what was needed' is what I would like to be displayed, I should have removed the alert because it uses Parse methods. Please pay no attention to it. But either way, {{eachElement.id}} doesn't output anything either.

Abushawish Over a year ago

I had meant to put eachElement.attributes.foo, but that doesn't work either. Sorry about the confusion.

James Talmage Over a year ago

Did you try {{eachElement.attributes.foo}} to see if that worked? I know it's not the property you are looking for. EDIT: beat me to it.

Abushawish Over a year ago

Yeah, nothing is outputted either :(.

James Talmage Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

AngularJS using ng-repeat on a $scope array

2 Answers 2

Comments

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Linked

Related