如何从深度li结构创建json输出

Question

I have ol li structure as html and I want to create JSON from that but my code doesn't create that JSON I need. Can any one please help me to solve it?

I need to create JSON like that

[
        {"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"}
        ]

And my sample codes are..

 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> 

Answer 1

I found the solution its very simple, in case any one needed I like to share it. If we tell the jQuery select first li as ol:first >li then its generate same hierarchy as li structure.

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

The main difference seem to be that you don't include the other data- attributes other than the data-en . You can iterate all of the data- attributes on an element with $.each($(this).data(), function(key, value) {}) .

In your case that would be something like:

$(' 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);
});

That should give you an equal JSON result. The properties may be in a different order, but that shouldn't matter for JSON (for example: your JSON example had the order en, enlink, tr and trlink, while I got tr, trlink, en and enlink in my example. The order of the menu items in the list is still the same (1, 1-1, 1-2, etc.).

A working example at https://jsfiddle.net/gpctm9d1/