список Сохранить уль в объект JSON

Question

Я пытаюсь сохранить список в json объект с помощью цикла через него с помощью рекурсивной функции, так это то, что я сделал до сих пор:
Мой список:

<ul id="Menu"> 
    <li>Menu 
     <ul> 
      <li>Test 1</li> 
      <li>Test 2 
       <ul> 
        <li>Sub test 2/1</li> 
        <li>Sub test 2/2</li> 
        <li>Sub test 2/3</li> 
       </ul> 
      </li> 
      <li>Test 3</li> 
      <li>Test 4</li>  
     </ul> 
    </li> 
    <li>Menu2</li> 
</ul> 

Мой сценарий:

<script> 
jQuery(document).ready(function(){ 
    item = {}; 
    buildMenu($('#Menu'), item); 
    menu.push(item); 
    console.log(JSON.stringify(menu)); 
}); 
var menu = []; 

function buildMenu(ul, item){ 
    var children = []; 
    ul.find('li').each(function(){ 
     var current = $(this); 
     if(current.find('ul').length > 0){ 
      var newItem = {}; 
      buildMenu(current.find('ul'), newItem); 
      children.push(newItem); 
     }else{ 
      children.push(current.text()); 
     } 
    }); 

    var txt = $(this).text(); 
    console.log('pushing into: '+txt); 
    item[txt] = children; 
} 
</script> 

Я хочу, чтобы сохранить каждое меню и его дети в нем как объекты JSON и отправить его на php, но у меня неправильный вывод:

[{"MenuTest 1Test 2Sub test 2/1Sub test 2/2Sub test 2/3Test 3Test 4Menu2":[{"Test 1Test 2Sub test 2/1Sub test 2/2Sub test 2/3Test 3Test 4":["Test 1",{"Sub test 2/1Sub test 2/2Sub test 2/3":["Sub test 2/1","Sub test 2/2","Sub test 2/3"]},"Sub test 2/1","Sub test 2/2","Sub test 2/3","Test 3","Test 4"]},"Test 1",{"Sub test 2/1Sub test 2/2Sub test 2/3":["Sub test 2/1","Sub test 2/2","Sub test 2/3"]},"Sub test 2/1","Sub test 2/2","Sub test 2/3","Test 3","Test 4","Menu2"]}] 

Что не так с моей функцией?

Answer 1

Это то, что вы ищете?

var menu = []; 
$(document).ready(function(){ 
    item = {}; 
    buildMenu($('#Menu'), item); 
    menu.push(item); 
    console.log(menu); 
}); 


function buildMenu(ul, item){ 
    var children = []; 
    ul.children('li').each(function(){ 
     var current = $(this); 
     if(current.children('ul').length > 0){ 
      var newItem = {}; 
      buildMenu(current.children('ul'), newItem); 
      children.push(newItem); 
     }else{ 
      children.push(current.text()); 
     } 
    }) 

var txt = ul.parent().html(); 
txt = txt.replace(/\<ul.*[\s\S]*\<\/ul\>/g,"").trim(); 
console.log(txt); 
item[txt] = children;  
} 

Вы должны выбрать только детей.

скрипку: https://jsfiddle.net/nsj3gqt5/1/

Answer 2

Из того, что я понял, этот скрипт будет делать то, что вам нужно, создавать меню с подменю и пунктов меню

$(function() { 
    var menu = []; 
    buildMenu($('#Menu'), menu); 
    console.log(JSON.stringify(menu)); 
}); 

function buildMenu(item, parentList) { 
    var isNode = function(item) { 
     return item.is('li'); 
    } 
    var isList = function(item) { 
     return item.is('ul'); 
    } 
    var hasChildren = function(item) { 
     return item.children().length > 0; 
    } 

    var itemSubList = []; 
    if (isNode(item)) { 
     if (hasChildren(item)) { 
      // This is subMenu 
      // console.log("subMenu " + item.justtext().trim()); 
      var subMenu = {}; 
      subMenu[item.justtext().trim()] = itemSubList; 
      parentList.push(subMenu); 
     } else { 
      // This is menuItem 
      // console.log("menuItem " + item.text()); 
      parentList.push(item.text()); 
      return; 
     } 
    } else if (isList(item)) { 
     // Processing list 
     // console.log("list"); 
     itemSubList = parentList; 
    } 
    item.children().each(function() { 
     var child = $(this); 
     buildMenu(child, itemSubList); 
    }); 
} 

Обратите внимание, что я использовал justtext jquery plugin, чтобы получить текст элемента без дочерних элементов , поэтому вы должны включить этот скрипт

<!-- include justtext jquery plugin --> 
<script src="http://viralpatel.net/blogs/demo/jquery/get-text-without-child-element/jquery.justtext.1.0.js"></script>