How do I loop through this Json object (angularJS)?

Question

I'm trying to loop through "tabs" in the Json object using AngularJS? How can I do it?

var model = {
    "$id": "1",
    "tabs": [{
        "$id": "2",
        "id": 2,
        "name": "Output",
        "layoutId": 1,
        "order": 1,
        "dashboardId": 1
    }, {
        "$id": "15",
        "id": 3,
        "name": "Yield",
        "layoutId": 1,
        "order": 2,
        "dashboardId": 1
    }, {
        "$id": "24",
        "id": 4,
        "name": "Trend",
        "layoutId": 1,
        "order": 3,
        "dashboardId": 1
    }],
    "id": 1,
    "name": "Test",
    "title": "Test",
    "description": "Test Dashboard",
    "createDate": "2015-06-08T00:00:00+01:00",
    "ownerId": 1,
    "enabled": true
};

When I try this, I get "undefined" in the console.

angular.forEach(model.tabs, function (tab) {
    console.log(tab.name);
});

not sure what I'm doing wrong?

EDIT: The data is coming from ASP.Net controller:

$http.get("/Dashboards/GetDashboardData").success(function (data) {
            model = data;
            angular.forEach(model.tabs, function (tab) {
                console.log(tab.name);
            });
        }).error(function (data) {
            console.log("error");
        });

If you console.log(model.tabs) immediately before the loop, does it appear as you'd expect? — Alex
– Alex, Commented Jun 15, 2015 at 10:12
Works fine by me jsfiddle.net/rL0gs6z7 Does your model get loaded asynchronous? — devqon
– devqon, Commented Jun 15, 2015 at 10:16
@Whistler that's pretty weird.. so when you do console.log(model) and see the model in the inspector, can you see the tabs property of it? — Alex
– Alex, Commented Jun 15, 2015 at 11:29

Alex · Accepted Answer · 2015-06-15 10:34:03Z

4

I expect that the model is not ready at the time you loop though it. Run the following code with your inspector open - the code you have is correct, but in your case fails because model isn't ready when you run the loop.

If you're loading data asyncronously you'll want to wait until the data is returned, either using a promise or a callback, and the loop through it.

var model = {
    "tabs": [{
        "name": "Output",
    }, {
        "name": "Yield",
    }, {
        "name": "Trend",
    }],
};

angular.forEach(model.tabs, function (tab) {
    console.log(tab.name);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

edited Jun 15, 2015 at 10:34

answered Jun 15, 2015 at 10:15

Alex

8,7039 gold badges47 silver badges58 bronze badges

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

4 Comments

Whistler Over a year ago

You maybe right, my data is returned by $http.get from ASP.Net MVC Controller. I probably have to add promise ?

Tony Barnes Over a year ago

@Whistler always a good idea to add a promise with a $http call.

Alex Over a year ago

@Whistler Sounds right, yep. If you call the .forEach chunk of code from the promise success function you should have everything working correctly.

Okazari Over a year ago

@TonyBarnes I actually don't see the point of using a promise with a $http call since $http return a promise itself. His exemple should work anyway.

Whistler · Accepted Answer · 2015-06-15 12:45:56Z

Ok I found the answer. It looks like my controller returns Json object as a string, so I have to switch it to object before I can use it as an object.

I have add this line before using model in the loop:

model = JSON.parse(data);

The whole solution with promise (not sure if I need it now):

DataService.getDashboardData().then(function (data) {
        model = JSON.parse(data);
        angular.forEach(model.tabs, function (tab) {
            console.log(tab);
        });
    });

 app.service("DataService", ["$http", "$q", function ($http, $q) {
    return {
            getDashboardData: function () {
            var dfd = $q.defer();
                     $http.get('/Dashboards/GetDashboardData').success(function (result) {
                        dfd.resolve(result);
                });
            return dfd.promise;
        }
    };
}]);

Collectives™ on Stack Overflow

How do I loop through this Json object (angularJS)?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related