2

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...

Improve this question
7
  • Can you explain better? What is allData? Is it the complete json at the top so allData.success is true? Commented Jan 21, 2014 at 23:35
  • 1
    Your JSON is wrong, did you copy and past it or write it from scratch? Items has an extra ',}' at the end. Commented Jan 21, 2014 at 23:35
  • What have you tried doing? What does this get you: ng-repeat="item in category.items". Then using {{ item.title }} Commented Jan 21, 2014 at 23:40
  • @ZackArgyle sorry, yes I wrote it from scratch -- forgot the ; at the end Commented Jan 22, 2014 at 0:10
  • @JasonGoemaat allData is the data i get from the API Commented Jan 22, 2014 at 0:10

1 Answer 1

Reset to default
4

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.

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

3 Comments

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.
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
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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.