![](/img/trans.png)
[英]How can I recursively create a UL/LI's from JSON data - multiple layers deep
[英]How can I create json output from deep li structure
我将ol li结构设为html,我想从中创建JSON,但是我的代码未创建所需的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"}
]
我的示例代码是..
var buildJson = function (root){ if(!root){ root='#domenu-en'; } var result = []; $(' ol > li ',root).each(function() { if($(this).children("ol").length){ result.push({"en":$(this).attr("data-en"),"data":buildJson($(this))}); //return false; } else{ result.push({"en":$(this).attr("data-en")}); } }); 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> <li data-enlink="#enlink1" data-en="Menu1" data-trlink="#trlink1" data-tr="Menü 1"> <ol> <li data-enlink="#enlink1-1" data-en="Menu1-1" data-trlink="#trlink1-1" data-tr="Menü 1-1"> <ol> <li data-enlink="#enlink1-1-1" data-en="Menu1-1-1" data-trlink="#trlink1-1-1" data-tr="Menü 1-1-1"> </li> <li data-enlink="#enlink1-1-2" data-en="Menu1-1-2" data-trlink="#trlink1-1-2" data-tr="Menü 1-1-2"> </li> </ol> </li> </ol> </li> <li data-enlink="#enlink2" data-en="Menu2" data-trlink="#trlink2" data-tr="Menü 2"> <ol> <li data-enlink="#enlink2-1" data-en="Menu2-1" data-trlink="#trlink2-1" data-tr="Menü 2-1"> </li> <li data-enlink="#enlink2-1" data-en="Menu2-1" data-trlink="#trlink2-1" data-tr="Menü 2-1"> </li> </ol> </li> <li data-enlink="#enlink3" data-en="Menu3" data-trlink="#trlink3" data-tr="Menü 3"> </li> </ol> </div> <textarea id="results" style=" height: 279px;"></textarea>
我发现该解决方案非常简单,以防万一我需要共享它。 如果我们告诉jQuery选择first li作为ol:first> li,那么它会生成与li结构相同的层次结构。
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;
}
主要的区别似乎是,你不包括其他data-
属性比其他的data-en
。 您可以使用$.each($(this).data(), function(key, value) {})
迭代元素上的所有data-
Attribute。
在您的情况下,将类似于:
$(' 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、1-2等)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.