multidimensional array in angular

Question

I have a multidimensional array from an API. Is it possible to programatically loop through the array?

{
    success: true,
    categories: [{
            cat_id: "2",
            name: "This is category One",
            description: null,
            photo_url: "/img/test.png",
            order: "1",
            items: [{
                    item_id: "1",
                    title: "Desk",
                    item_url: "/690928460",
                    photo_url: "/desk.png",
                }, {
                    item_id: "2",
                    title: "Chair",
                    item_url: "/18882823",
                    photo_url: "/chair.png",
                },
            }]
    }]
}

My controller looks like this:

myApp.controller('items', function($scope, $http, $location, Data) {
    var apiUrl = '/api/items';
    $http.get(apiUrl).
    success(function(data) {
        $scope.data = Data;
        $scope.allData = data;
    });
    $scope.changeView = function(view) {
        $location.path(view);
    }
});

Angular index file just has: <div ng-view=""></div>

View file

<div class="scrollable categories-container animated-fast slideInUp">
    <div class="container categories">
        <div class="row" ng-repeat="categories in allData">
            <div class="col-xs-6" ng-repeat="category in categories">
                <div class="items">
                    <div class="title">
                        {{ category.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I can loop through the category names fine, but when trying to return items for EACH category I don't understand the logic behind it...

Solution

I would suggest some simple nested for loops, as for each gives rise to more complexity. As I'm not sure what you want to do with the data let's just create an array of all item names and one of all category names:

Within your success function:

var items = [], categories = []
for(var i = 0; i < data.categories.length;i++){
    categories.push(data.categories[i].name);
    for(var j = 0; j < data.categories[i].items.length;j++){
        items.push(data.categories[i].items[j].name);
    }
}
console.log(categories);
console.log(items);

EDIT:

Completely missed your html code somehow, here is my solution:

<div class="scrollable categories-container animated-fast slideInUp">
    <div class="container categories">
        <div class="col-xs-6" ng-repeat="category in allData.categories">
            <div class="items">
                <div class="title">
                    {{ category.name }}
                </div>
            </div>
        </div>
    </div>
</div>

EDIT 2:

As to your comment: If you want to select the secondary view's contents(ie the items) based on the selection of a category I would suggest a ng-click attribute. A directive could be used but isn't necessary:

<div class="scrollable categories-container animated-fast slideInUp">
    <div class="container categories">
        <div class="col-xs-6" ng-repeat="category in allData.categories">
            <div class="title" ng_click="selected_category = category">
                {{ category.name }}
            </div>
        </div>

        <div class="col-xs-6" ng-repeat="item in selected_category.items">
            <div class="title">
                {{ item.name }}
            </div>
        </div>
    </div>
</div>

So when your categories data is loaded the first ng-repeat is populated with the categories. Each div with class title will have a function called on click which will make the selected_category object equal the selected category. This will then cause the second view to be populated with all the items in the selected category by Angular's two way bind.

Comments

[jamesbar]

is there a way to just display data from one category? example: in the categories view it displays the categories, but when you press a category it takes you to another view to display the items in the selected category.

[caffeinated.tech]

Sure, You can either (1)make this your main content and read through the ng-view and routeprovider docs or (2) use ng-include and a template or (3) make your own directive. I would use the 3rd but explain to me if these categories are the main focus of the view, or if the view refers to your whole page: basically what you want to accomplish

[jamesbar]

thanks man, appreciate it. basically this is a small app; user logs in, has an inbox (view), has a button to select from a bunch of categories (another view) and in each of those categories there are items for that category that the user can choose. all the data is populated via an api. i'm still learning, i can do this in javascript but want to work with angular to learn