how to recurse through child nodes and output as json?

Question

I'm having nested un-ordered list with childrens, I'm trying to store all the data from the list into JSON format data:

Following is my HTML code:

<nav id="nav">
    <ul class="header-top-nav">
        <li>
            <a href="index.html">Home</a>
            <ul>
                <li><a href="subhome1.html">Home 1</a>
                    <ul>
                        <li><a href="subsubhome1.html">Sub Home</a></li>
                    </ul>
                </li>
                <li><a href="subhome2.html">Home 2</a></li>
                <li><a href="subhome3.html">Home 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

My JQuery:

content = [];
$('nav > ul').find('li').each( function () {

        pages = {};
        function menu() {
            pages['pagelink'] = $(this).children('a').attr('href');
            pages['pagename'] = $(this).children('a').text();
            var submenucheck = $(this).children('ul').length;
            if(submenucheck){
                pages['submenu'] = [];
                menu();
            }
            else{
                pages['submenu'] = "NULL";
            }
            contents.push(pages);
        }menu();

});

I want to have data format to be like this:

{
  "pages": [
    {
      "pagelink": "index.html",
      "pagename": "Home",
      "submenu": [
        {
          "pagelink": "subhome1.html",
          "pagename": "Home 1",
          "submenu": [
            {
              "pagelink": "subsubhome1.html",
              "pagename": "Sub Home",
              "submenu": "NULL"
            }
          ]
        },
        {
          "pagelink": "subhome2.html",
          "pagename": "Home 2",
          "submenu": "NULL"
        },
        {
          "pagelink": "subhome3.html",
          "pagename": "Home 3",
          "submenu": "NULL"
        }
      ]
    }
  ]
}

Please help me out to achieve this.

Since you probably have "unlimited sub-menus" you should also have "unlimited-loops" to go over them. Do you know the concept of recursion? — Dekel, Aug 15 '16 at 16:48
@Dekel Is it like placing all the codes in function then calling it in the loop? — Nitish Kumar, Aug 15 '16 at 16:50
@Dekel How can I check and loop whether it is having children/submenu, is there any kind of check? like any JQuery function — Nitish Kumar, Aug 15 '16 at 16:53
you need a recursive function http://stackoverflow.com/a/18005125/4769440 — Daniel Lizik, Aug 15 '16 at 16:59

score 1 · Accepted Answer · answered Aug 15 '16 at 18:30

try this one

var results = { };

function getData(ul) {
    var data = []
    ul.children('li').each(function() {
        var li = $(this),
            subData = {},
            a = li.children('a'),
            child = li.children('ul');
        subData['pagelink'] = a.attr('href');
        subData['pagename'] = a.text();
        if(child.length) 
            subData['submenu'] = getData(child); 
        data.push(subData);
    })
    return data;
}
results.pages = getData($('nav > ul'));
console.log(results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
<ul class="header-top-nav">
    <li>
        <a href="index.html">Home</a>
        <ul>
            <li><a href="subhome1.html">Home 1</a>
                <ul>
                    <li><a href="subsubhome1.html">Sub Home</a></li>
                </ul>
            </li>
            <li><a href="subhome2.html">Home 2</a></li>
            <li><a href="subhome3.html">Home 3</a></li>
        </ul>
    </li>
</ul>
</nav>

Thanks a lot. You are savior, I was cracking my head up and down. — Nitish Kumar, Aug 15 '16 at 18:43

how to recurse through child nodes and output as json?

1 Answers1