AngularJS multidimensional arrays

Question

I am looking for a way to bind data from a three dimensional array in the scope with my view..

My scope (short version) looks like this

$scope.publicationData = [ 
    { pubId:'1' , pubName:'Level 1 A' , pubCat:[
        { pubCatId:'1' , pubCatName:'Level 2 A', pubSubCat:[ 
            { pubSubCatId:'1' , pubSubCatName:'Level 3 A' }, 
            { pubSubCatId:'2' , pubSubCatName:'Level 3 B' }
            ]
        },
        { pubCatId:'2' , pubCatName:'Level 2 B', pubSubCat:[
            { pubSubCatId:'3' , pubSubCatName:'Level 3 C' },
            { pubSubCatId:'4' , pubSubCatName:'Level 3 D' }
            ]
        }
        ]
    }];

In the view I have code that successfully presents what is in the first and second array dimension,, but I can't get values from pubSubCatId or pubSubCatName

HTML + Angular View

<div ng-controller="myPublictionCtrl">

<div ng-repeat="publication in publicationData">

    <ul>
        <li >
                            <!-- This works -->
            {{publication.pubId}}. {{publication.pubName}}
        </li>
    </ul>

    <ul>
                    <!-- This works -->

        <li ng-repeat="category in publication.pubCat">
            {{category.pubCatId}}. {{category.pubCatName}}
        </li>

    </ul>

    <ul>
                    <!-- This doesn't work -->

        <li ng-repeat="subcategory in publication.pubCat.pubSubCat">
            {{subcategory.pubSubCatName}}
        </li>
    </ul>
</div>
</div>

How would I retrieve data from deeper layers of the scope. Can AngularJS do this?

This doesn't look right publication.pubCat.pubSubCat... pubCat is an array. — elclanrs
– elclanrs, Commented Nov 11, 2013 at 22:25
How you want to present it? You could use nested ng-repeats, if you wanted to. — hugo der hungrige
– hugo der hungrige, Commented Nov 11, 2013 at 22:32
I don't really want a nested presentation... but it may be the only way I can do it.. — GRowing
– GRowing, Commented Nov 11, 2013 at 22:41

JB Nizet · Accepted Answer · 2013-11-11 22:32:36Z

10

The third loop must be nested inside the second one, and use

subcategory in category.pubSubCat

answered Nov 11, 2013 at 22:32

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

1 Comment

GRowing Over a year ago

Oh Thanks! I originally used category.pubSubCat and I couldn't get it to display data so it threw me off and I started doing illogical things.. I ended up having the nesting issue. Thanks.

Sumanth · Accepted Answer · 2015-07-03 06:33:45Z

<div ng-controller="myPublictionCtrl">
        <div ng-repeat="publication in publicationData">
            <ul>
                <li style="text-align:left">                       
                    {{publication.pubId}}. {{publication.pubName}}
                </li>
            </ul>
            <ul>
                <li ng-repeat="category in publication.pubCat" style="text-    align:left">{{category.pubCatId}}. {{category.pubCatName}}               
                <ul> 
                <li ng-repeat="subcategory in category.pubSubCat" style="text-align:left">{{category.pubCatId}}.{{subcategory.pubSubCatId}}.     {{subcategory.pubSubCatName}}
                </li>
                </li>
                </ul>
            </ul>
        </div>
    </div>

It'd be great if you could add a little explanation to your code.

Collectives™ on Stack Overflow

AngularJS multidimensional arrays

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related