javascript - 将嵌套的 ul li 转换为 json

Question

乌里结构

<ul id="sortable" class="sortable ui-sortable">
<li id="home" class="col-sm-12 col-lg-12 "><div>home <span data-name="home" class="delete">remove</span></div>
    <ul>
            <li id="about-us" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>about-us <span data-name="about-us" class="delete">remove</span></div>
                <ul>
                    <li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>product <span data-name="product" class="delete">remove</span></div> </li>
                </ul>
            </li>
    </ul>
</li>
<li id="carrer" class="col-sm-12 col-lg-12 "><div>carrer <span data-name="carrer" class="delete">remove</span></div>
    <ul>
        <li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>product <span data-name="product" class="delete">remove</span></div></li>
        <li id="about-us" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>about-us <span data-name="about-us" class="delete">remove</span></div>
            <ul>
                <li id="home" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>home <span data-name="home" class="delete">remove</span></div></li>
            </ul>
        </li>
        <li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>product <span data-name="product" class="delete">remove</span></div>         </li>
    </ul>
</li>
    <li id="carrer" class="col-sm-12 col-lg-12 "><div>carrer <span data-name="carrer" class="delete">remove</span></div></li>
    <li id="about-us" class="col-sm-12 col-lg-12 "><div>about-us <span data-name="about-us" class="delete">remove</span></div>
        <ul>
            <li id="product" class="col-sm-12 col-lg-12" style="position: relative; left: 0px; top: 0px;"><div>product <span data-name="product" class="delete">remove</span></div> </li>
        </ul>
    </li>

我想要Json这样的

{ "name": "home remove", "children": [{ "name": "about-us remove", "children": [{ "name": "product remove", "children": [{}], }] }], "name": "carrer remove", "children": [{ "name": "product remove", "children": [{}], "name": "about-us remove", "children": [{ "name": "home remove", "children": [{}], }], "name": "product remove", "children": [{}], }], "name": "carrer remove", "children": [{}], "name": "about-us remove", "children": [{ "name": "product remove", "children": [{}], }] }

我做了如下代码

function buildJSON($li) {
   var subObj = { "name": $li.contents().eq(0).text().trim() };
   $li.children('ul').children().each(function() {
     if (!subObj.children) { subObj.children = []; }
     subObj.children.push(buildJSON($(this)));
   });
   return subObj;
 }

 var obj = buildJSON($("#sortable").children());
 $('#sortable').append('<pre>').find('pre').append(JSON.stringify(obj, null, 2));

拿出不同的东西

{ "name": "home remove", "children": [ { "name": "about-us remove", "children": [ { "name": "product remove" } ] }, { "name": "product remove" }, { "name": "about-us remove", "children": [ { "name": "home remove" } ] }, { "name": "product remove" }, { "name": "product remove" } ] }

有些条目丢失了... 请帮助我在哪里我错过了代码

提前致谢

Answer 1

在遍历父级 ul 的每个子级后，您丢失了每个 li。

而且它不会返回单个对象。您将获得 json 数组格式的数据。

这是完整的JS代码。

 function FetchChild(){
     var data =[];
        $('#sortable > li').each(function(){
            data.push(buildJSON($(this)));
        });

        return data;
     }
    function buildJSON($li) {
   var subObj = { "name": $li.contents().eq(0).text().trim() };
   $li.children('ul').children().each(function() {
     if (!subObj.children) { 
        subObj.children = [];
        }
     subObj.children.push(buildJSON($(this)));
   });
   return subObj;
 }
 var obj = FetchChild();
 $('#sortable').append('<pre>').find('pre').append(JSON.stringify(obj, null, 2));

Fiddle Demo