Question

111

multidimensional array in angular

rated 0 times [ 114] [ 3] / answers: 1 / hits: 32931 / 11 Years ago, tue, january 21, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckinleyi

Add To Favorites

Follow

Total Points: 121

Total Questions: 100

Total Answers: 109

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

answered 11 Years ago andrewb · Accepted Answer

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.