wie durch untergeordnete Knoten recurse und als json ausgeben?

Question

ich mit Kindern verschachtelte ungeordnete Liste habe, ich versuche, aus der Liste in das JSON-Format-Daten alle Daten zu speichern:

Folgende ist mein 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> 

Mein 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(); 

}); 

ich möchte so sein Datenformat haben:

{ 
    "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" 
     } 
     ] 
    } 
    ] 
} 

Bitte helfen Sie mir, dies zu erreichen.

Answer 1

versuchen dieses

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); \t 
 
     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>