轉換嵌套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

回答

相關問題