angularjs access multidimensional array data

Question

I have created some mock datas that I will use in my angular app project with the following structure:

var videos = [
        { 
            category: 
            [
                { explainer: 
                    [
                        'explain1',
                        'explain2',
                        'explain3',
                    ] 
                }, 
                { cartoon:
                    [
                        'cartoon1',
                        'cartoon2',
                        'cartoon3',
                    ]
                }, 
                { moGraph: 
                    [
                        'moGraph1',
                        'moGraph2',
                        'moGraph3',
                    ] 
                }, 
            ]

        }
    ];

Ok here are the things I want to do with the data:

display the category names(explainer, cartoons, moGraph)
display the datas inside each categories(ex. when a user selects moGraph, all the available data under moGraph will be shown)

I tried to use <ng-repeat="video in videos track by $index"> but I only manage to make it work on single dimensional array like (var projects = [ 'proj1', 'proj2', 'proj3'];)

Im really confuse on how to do this, please enlighten thanks'much

Your data format is pretty much unusable. Why so many arrays? I can't think of a clean way to get the key name from each category array object. Now if category were just an object with keys, that would be workable, ie category: { explainer: [...], cartoon: [...], moGraph: [...] } — Phil
– Phil, Commented Jan 21, 2015 at 3:15

Phil · Accepted Answer · 2015-01-21 03:19:25Z

Looks like you'll just need to have a lot of nested repeaters. For example...

<div ng-repeat="video in videos">
    <div ng-repeat="categories in video.category">
        <div ng-repeat="category in categories">
            <div ng-repeat="(catName, datas) in category">
                <h3>{{ ::catName }}</h3>
                <ul>
                    <li ng-repeat="data in datas">{{ ::data }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Personally, I would change the data format to look more like this...

var videos = [
    {
        explainer: ['explain1', 'explain2', 'explain3'],
        cartoon: ['cartoon1', 'cartoon2', 'cartoon3']
        moGraph: ['moGraph1', 'moGraph2', 'moGraph3']
    }
];

Then all you need is...

<div ng-repeat="video in videos">
    <div ng-repeat="(category, datas) in video">
        <h3>{{ ::category }}</h3>
        <ul>
            <li ng-repeat="data in datas">{{ ::data }}</li>
        </ul>
    </div>
</div>

hi Phil, thanks for taking the time to answer I really appreciate it. Just one more thing, what's the use of the double colon inside the angular expression {{ ::category }} just curious because i tried removing the thing but output remains the same. ^^
The double colon represents one-time binding, only available in Angular 1.3+ similar to directives like bind-once. Unlike the standard 2-way binding the model is not watched and will not be updated if a change occurs.

Collectives™ on Stack Overflow

angularjs access multidimensional array data

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related