How to convert menu to Multi-dimensional associative arrays in javascript?

Question

This is my menu layout in html

<ul>
   <li>Item A
       <ul>
           <li>Item A1</li>
           <li>Item A2</li>
       </ul>
   </li>
   <li>Item B
       <ul>
           <li>Item B1</li>
           <li>Item B2</li>
           <li>Item B3</li>
       </ul>
   </li>
</ul>

How to convert this layout to below Multi-dimensional associative JS array ?

var nav = [
    { "title" : "Item A",
      "submenu" : [ "Item A1", "Item A2" ] },
    { "title" : "Item B",
      "submenu" : [ "Item B1", "Item B2", "Item B3"] }
];

Please someone tell me how to do this

Iterate the elements and build the array, did you give it a try? A loop for outer elements (Item A, Item B) and a nested loop for inner elements (Item A1..). — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Aug 28, 2015 at 17:10

LTasty · Accepted Answer · 2015-08-28 17:29:54Z

1

You need to each li and after each children of li for extract the submenu

var finalObj=new Array();
$("ul li:not(ul li ul li)").each(function(){

    var objtime=new Object();


    objtime.title=$(this).clone()   
    .children() 
    .remove() 
    .end() 
    .text().trim();


    var tempArray=new Array();
    $(this).children("ul").children("li").each(function(){
        tempArray.push($(this).text());
    });
    objtime.subtitle=tempArray;
    finalObj.push(objtime);
});

http://jsfiddle.net/e6vq1m4m/2/

answered Aug 28, 2015 at 17:29

LTasty

2,00815 silver badges23 bronze badges

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

Comments

Kevon · Accepted Answer · 2015-08-28 17:58:43Z

0

If i understood correctly, you may want to do something like this.

var menuArray = [],
      subArray;
  $('ul.first > li').each(function(i){
    var firstMenu = $.trim( $(this).find("a:first").text() );
    subArray = [];
    $(this).find('ul > li a').each(function(i){
      var secondMenu = $.trim( $(this).filter("a").text() );
      subArray.push(secondMenu);
    });
    menuArray[firstMenu] = subArray;
  });

answered Aug 28, 2015 at 17:58

Kevon

631 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to convert menu to Multi-dimensional associative arrays in javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related