AngularJS not displaying objects inside of an array from MongoDB

Question

AngularJS will not display the "tracking" entry in my data structure. It shows tracking as "tracking": [] as an empty array in the HTML template, and when its console.log'd.

My API returns the following data structure:

[{
"_id": "57e96aaa45b09843a53a4dcd",
"phase": 1,
"notes": "asdf",
"treatment": "asdf",
"patientname": "asdf",
"__v": 0,
"tracking": [
    {
    "modifiedby": "Person",
    "action": "Created",
    "_id": "57e96aaa45b09843a53a4dce",
    "modifiedat": "2016-09-26T18:36:26.281Z"
    }
]
}]

In AngularJS I have the following factory:

getwaiting: function(callback){
        $http.get('/pre-auth/getwaitingsubmit').then(function success(data){
            return callback(data.data)
        })
    }

In my controller:

WaitingFactory.getwaiting(function(data){
        console.log(data);
        $scope.waitinglist = data;
    });

When I do {{waitinglist}} in my HTML template, it displays the ALL of the data except "tracking". It displays tracking as: "tracking":[], I cant access the data by stepping into it. If i stringify the data and console.log it, I can see that the data is IN tracking as shown in the first code snippet.

What am I doing wrong here?

Just loop through you datas and your good to go – t3__rry Sep 26 '16 at 20:05 — t3__rry, Sep 26 '16 at 20:05
That was it. I just looped through it and it was there! – supreme0100 Sep 26 '16 at 20:14 — supreme0100, Sep 26 '16 at 20:14

score 0 · Answer 1 · edited May 23 '17 at 12:06

Try returning a promise from the factory rather than using a callback:

getwaiting: function(){
        return $http.get('/pre-auth/getwaitingsubmit').then(function success(data){
            return data.data;
        })
    }

in controller

WaitingFactory.getwaiting().then(function(data){
        console.log(data.tracking);
        $scope.waitinglist = data;
    });

Small warning: When you expand the data object in the console view when console.log is called, it shows the most recent value of the data object, i.e. when the asynchronous $http call returned valid data.

Try printing data.tracking instead, which should return undefined if this truly is an asynchronous problem. Please refer to: Weird behavior with objects & console.log

score 0 · Answer 2 · answered Sep 26 '16 at 20:09

After trying Oberon's suggestion, the data was printed the same way.

I then noticed t3__rry's comment to just "loop through it" and sure enough with an ng-repeat, the data WAS there I just needed to loop through it, I guess angularJS just didnt want to show the objects in the print.

Its still peculiar that in the chrome console it still showed tracking as Array[0].

Thank you all for the quick replies!!

AngularJS not displaying objects inside of an array from MongoDB

2 Answers2