Get all objects from Array in Angular Scope

Question

I am trying to get all objects within an array from a scope in angular. I am using jQuery to get the array but I'm not sure how to get each object from the array without having to define it like [0].

angular.element("#scopes").scope().fixtures;

This gives me:

Array[380]

Which I can then select from but I need to get them all in one go.

Thanks.

What do you mean by "get all objects within an array"? Do you want an array of these objects? If so, how is that array different from the array you can already get? If not, what form do you want them in? — andyk, Apr 19 '16 at 23:00
Sorry, what I mean is I want to get at certain parts of the array but I need to return all of them in one go in order to access these certain parts. For example the API that I am using is for football data. I need to get the status of the match e.g. FINISHED or TIMED for each one. — GarethFrazer, Apr 19 '16 at 23:02
If I add ```angular.element("#scopes").scope().fixtures.status;``` to it then it becomes undefined however I can access the first one by ```angular.element("#scopes").scope().fixtures[0].status;```. I want a way to access all status at once. Hope this is clearer. — GarethFrazer, Apr 19 '16 at 23:05
@GarethFrazer Look at my answer, it is exactly what you are needing — mhodges, Apr 19 '16 at 23:05

mhodges · Accepted Answer · 2016-04-20T16:41:24.237

1

EDIT: This is how I would implement this solution. Note that it no longer uses any jQuery. It retrieves the data from the API, and then iterates over each item in the array allowing you to do what you want with it. angular.forEach Docs

// In your angular controller...
$http({
    url: "myApiUrl",
    method: "GET",
    cache: false,
    params: {
        //whatever API params you want to pass
    }
}).then(function successCallback(response) {
    $scope.fixtures = response.data;
    $scope.fixtures.forEach(function (element, index) {
        // do what you want - as per your comments...
        console.log("Element: " + index);
        console.log("Status: " + element.status);
        console.log("________________________________");
    });

}, function failureCallback() {
    alert("There was an error retrieving the data!");
});

edited Apr 20 '16 at 16:41

answered Apr 19 '16 at 23:01

mhodges

10,938
2
28
46

This is perfect. Thank you. It seems like such a silly question now. Appreciate the quick response. – GarethFrazer Apr 19 '16 at 23:08
@GarethFrazer No worries! If this solution worked for you, feel free to upvote and mark as the accepted answer – mhodges Apr 19 '16 at 23:09
When I use this in the console I can get it working however when using it in my js file it says 'Cannot read property 'length' of undefined'. – GarethFrazer Apr 19 '16 at 23:29
1

That likely has to do with a timing issue. If you do not have some sort of trigger for this function, and especially if you do not have it in a document ready function, it has a good possibility of executing before angular has a chance to bind itself to the dom, create the $scope, attach the fixtures array to $scope, etc. etc. So because the code is executing before angular has a chance to do it's thing, it's coming back undefined, and jQuery's $.each is trying to do a .length on undefined, which is why you are getting that error. – mhodges Apr 20 '16 at 15:31
What would you advise is the best way to deal with that then? – GarethFrazer Apr 20 '16 at 16:34
Put this code in the callback function of your API call to get the data. I will update my answer to show what I mean – mhodges Apr 20 '16 at 16:35
1

@GarethFrazer Done. See if that makes sense for your application – mhodges Apr 20 '16 at 16:41
Thank you so much, I have only recently started with Angular, this makes things a lot clearer for me. Very much Appreciated. – GarethFrazer Apr 20 '16 at 16:45
1

@GarethFrazer No problem! Here are some resources that may be helpful for you: http://www.ng-newsletter.com/posts/angular-for-the-jquery-developer.html http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – mhodges Apr 20 '16 at 16:49

score 1 · Answer 2 · answered Apr 19 '16 at 23:08

To answer your specific question, it sounds like you want to map over the results:

var statuses = angular.element("#scopes").scope().fixtures.map(function(fixture) {
    return fixture.status;
});

However, it feels like you should be able to get this data from your model instead of trying to pull it out of your view.

Get all objects from Array in Angular Scope

2 Answers2