Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 726
Chris Bier Avatar asked Oct 02 '12 19:10

Chris Bier


People also ask

How to make multidimensional array in JavaScript?

JavaScript does not provide the multidimensional array natively. However, you can create a multidimensional array by defining an array of elements, where each element is also another array. For this reason, we can say that a JavaScript multidimensional array is an array of arrays.

Can multi dimensional arrays be indexed?

Indexing multi-dimensional arraysMulti-dimensional arrays are indexed in GAUSS the same way that matrices are indexed, using square brackets [] . Scanning above, you can see that the value of the element at the intersection of the third row and second column of x1 is 8.

Does JavaScript support multidimensional arrays?

Javascript has no inbuilt support for multidimensional arrays, however the language is flexible enough that you can emulate this behaviour easily by populating your arrays with separate arrays, creating a multi-level structure.


2 Answers

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>
like image 123
bigblind Avatar answered Oct 22 '22 20:10

bigblind


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>
like image 2
pherris Avatar answered Oct 22 '22 19:10

pherris