如何創建從深li結構的json輸出

Question

我有ol結構作爲html，我想從中創建JSON，但我的代碼不會創建我需要的JSON。任何人都可以幫我解決它嗎？

我需要這樣的

[ 
     {"en":"Menu1","enlink":"#enlink1","tr":"Menü 1","trlink":"#trlink1","data":[ 
      {"en":"Menu1-1","enlink":"#enlink1-1","tr":"Menü 1-1","trlink":"#trlink1-1","data":[ 
       {"en":"Menu1-1-1","enlink":"#enlink1-1-1","tr":"Menü 1-1-1","trlink":"#trlink1-1-1"}, 
       {"en":"Menu1-1-2","enlink":"#enlink1-1-2","tr":"Menü 1-1-2","trlink":"#trlink1-1-2"} 
      ]}, 
     ]}, 
     {"en":"Menu2","enlink":"#enlink2","tr":"Menü 2","trlink":"#trlink2","data":[ 
      {"en":"Menu2-1","enlink":"#enlink2-1","tr":"Menü 2-1","trlink":"#trlink2-1"}, 
      {"en":"Menu2-1","enlink":"#enlink2-1","tr":"Menü 2-1","trlink":"#trlink2-1"} 
     ]}, 
     {"en":"Menu3","enlink":"#enlink3","tr":"Menü 3","trlink":"#trlink3"} 
     ] 

而且我的樣本代碼創建JSON ..

var buildJson = function (root){ 
 
\t if(!root){ 
 
\t \t root='#domenu-en'; 
 
\t } 
 
\t var result = []; 
 
\t $(' ol > li ',root).each(function() { 
 
\t \t if($(this).children("ol").length){ 
 
\t \t \t result.push({"en":$(this).attr("data-en"),"data":buildJson($(this))}); 
 
\t \t \t //return false; 
 
\t \t } else{ 
 
\t \t \t result.push({"en":$(this).attr("data-en")}); 
 
\t \t } 
 
\t }); 
 
return result; 
 
} 
 
$('#results').val(JSON.stringify(buildJson()))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="domenu-en"> 
 
<ol> 
 
\t <li data-enlink="#enlink1" data-en="Menu1" data-trlink="#trlink1" data-tr="Menü 1"> 
 
\t \t <ol> 
 
\t \t \t <li data-enlink="#enlink1-1" data-en="Menu1-1" data-trlink="#trlink1-1" data-tr="Menü 1-1"> 
 
\t \t \t \t <ol> 
 
\t \t \t \t \t <li data-enlink="#enlink1-1-1" data-en="Menu1-1-1" data-trlink="#trlink1-1-1" data-tr="Menü 1-1-1"> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li data-enlink="#enlink1-1-2" data-en="Menu1-1-2" data-trlink="#trlink1-1-2" data-tr="Menü 1-1-2"> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ol> 
 
\t \t \t </li> 
 
\t \t </ol> 
 
\t </li> 
 
\t <li data-enlink="#enlink2" data-en="Menu2" data-trlink="#trlink2" data-tr="Menü 2"> 
 
\t \t <ol> 
 
\t \t \t <li data-enlink="#enlink2-1" data-en="Menu2-1" data-trlink="#trlink2-1" data-tr="Menü 2-1"> 
 
\t \t \t </li> 
 
\t \t \t <li data-enlink="#enlink2-1" data-en="Menu2-1" data-trlink="#trlink2-1" data-tr="Menü 2-1"> 
 
\t \t \t </li> 
 
\t \t </ol> 
 
\t </li> 
 
\t <li data-enlink="#enlink3" data-en="Menu3" data-trlink="#trlink3" data-tr="Menü 3"> 
 
\t </li> 
 
</ol> 
 
</div> 
 
<textarea id="results" style=" height: 279px;"></textarea>

Answer 1

工作示例我發現溶液中的很簡單，在殼體任何一個需要我想分享它。如果我們告訴了jQuery選擇第一李鴻章爲OL：。首先>李那麼它產生相同的層次結構李結構

var buildJson = function (root){ 
if(!root){ 
    root='#domenu-en'; 
} 
var result = []; 
$('ol:first > li ',root).each(function() { 
var itemdata = {}; 
$.each($(this).data(), function(key, value) { 
    itemdata[key] = value; 
}); 

    if($(this).children("ol").length){ 

    itemdata["data"] = buildJson($(this)); 
    } 

result.push(itemdata); 
}); 
return result; 
} 

Answer 2

的主要區別似乎是，你不包括除data-en以外的其他data-屬性。您可以使用$.each($(this).data(), function(key, value) {})迭代元素上的所有data-屬性。

在你的情況，這將是這樣的：

$(' ol > li ',root).each(function() { 
    var itemdata = {}; 
    $.each($(this).data(), function(key, value) { 
     itemdata[key] = value; 
    }); 

    if($(this).children("ol").length){ 
     itemdata["data"] = buildJson($(this)); 
    } 

    result.push(itemdata); 
}); 

這應該給你一個平等的JSON結果。這些屬性可能有不同的順序，但這對JSON應該不重要（例如：在我的示例中，您的JSON示例具有順序en，enlink，tr和trlink，而我有tr，trlink，en和enlink。在列表中的菜單項的順序仍然是相同的（1，1-1，1-2，等等）。

在https://jsfiddle.net/gpctm9d1/