Using AngularJS to turn a multi-dimensional array into a multi level list

Question

I am using AngularJS and trying to use ng-repeat or the like to take a multi-dimensional array and put it into the DOM as a mutli-level list.

From This:

    var menuOptions = [
        ["Page One"],
        ["Page Two"],
        ["Page Three"],
        ["Page Four", ["Sub-Page 1", "Sub-Page 2", "Sub-Page 3"] ],
        ["Page Five"]
    ];

To This:

   <ul>
        <li>Page One</li>
        <li>Page Two</li>
        <li>Page Three</li>
        <li>Page Four 
            <ul>
                <li>Sub-Page 1</li>
                <li>Sub-Page 2</li>
                <li>Sub-Page 3</li>
            </ul>
        </li>
        <li>Page Five</li>
   </ul>

I was unable to find anything in the Angular JS Documentation and a search of the web came to no avail. I am aware that I can handle something like this with plain 'ol Javascript, or PHP but I would like to utilize some Angular JS thing like ng-repeat.

Any input is appreciated.

Thanks!

tRuEsAtM · Accepted Answer · 2018-07-25 20:40:34Z

16

If you turn your array into the following

var menuOptions = [
    ["Page One", []],
    ["Page Two", []],
    ["Page Three", []],
    ["Page Four", ["Sub-Page 1", "Sub-Page 2", "Sub-Page 3"] ],
    ["Page Five", []]
];

You should be able to do this:

<ul>
  <li ng-repeat='option in menuOptions'>
    {{option[Ø]}}
    <ul>
      <li ng-repeat='suboption in option[1]'>{{suboption}}</li>
    </ul>
  <li>
</ul>

edited Jul 25, 2018 at 20:40

tRuEsAtM

3,7519 gold badges64 silver badges108 bronze badges

answered Oct 2, 2012 at 19:34

bigblind

12.9k14 gold badges72 silver badges132 bronze badges

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

2 Comments

Chris Bier Over a year ago

This works! Thank you :) I also added ng-show="option[1] != ''" to the second level UL in order to hide it if it is empty.

Scott Sword Over a year ago

@sys.stderr curious. Can you still have suboption in option[1] access the proper scope if you don't declare ng-repeat='option in menuOptions' in the parent node? Meaning, do you have to walk it onto the appropriate scope?

pherris · Accepted Answer · 2013-09-15 20:47:14Z

If you don't know the names of your keys, you can use this format...

JSON

{
  "aclType": "combined",
  "active": 1,
  "attributes": {
    "a6f8f9fb89ac4b2b12121c4ec4fa5441/#": [
      "pub",
      "sub",
      "get",
      "post",
      "delete"
    ],
    "a5f8f9eb89ac4b2b12121c4ec4fa8670/#": [
      "pub",
      "sub",
      "get",
      "post",
      "delete"
    ]
  }
}

You can loop like this:

<h2>Account Permissions</h2>
<ul>
    <li>
        <p><strong>Active:</strong> {{ acl.active}}</p>
    </li>
    <li ng-repeat="(key, data) in acl.attributes">
        <p><strong>{{ key }}</strong></p>
        <ul>
            <li ng-repeat="permission in data">{{ permission }}</li>
        </ul>
    </li>
</ul>

Collectives™ on Stack Overflow

Using AngularJS to turn a multi-dimensional array into a multi level list

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related