如何创建从深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/