转换嵌套UL李以JSON

UL李结构转换嵌套UL李以JSON

<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”：“about-us remove”， “children”：[{“name”：“product remove”， “children”：[{}]， }] }]， “名称”： “CARRER删除”， “孩子”：[{ “名称”： “产物中除去”， “孩子”：[{}]， “名称”：“关于美中删除 “ ”孩子“：[{ ”名“： ”主屏幕上删除“， ”孩子“：[{}]， }]， ”名“： ”产品删除“， ” 孩子“：[{}]， }]， ”name“：”carrer remove“， ”children“：[{}]， ”name“：”about-us 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));

出把它的不同的东西

{ “名” ：“家庭删除”， “children”：[ { “name”：“about-us remove”， “children”：[ { “名”： “产品删除” } ] }， { “名”： “产品删除” }， { “名”： “对，我们删除”， “孩子” ：[ { “名”： “主屏幕上删除” } ] }， { “名”： “产品删除” }， { “名”： “产品删除” } ] }

一些项丢失...... 请帮我在哪里，我提前

来源

2017-04-10 Sachin Sudhakar Sonawane

你输出的数据结构并不好，这就是你会得到https://jsfiddle.net/Lg0wyt9u/1777/ –

@NenadVracar我已经更新我的结构，请检查一次 –

错过代码

感谢您进行遍历父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

来源

2017-04-10 13:18:22

Amit kumar，Nenad Vracar谢谢...它适用于我，你救了我的夜晚 –

转换嵌套UL李以JSON

回答

相关问题