Как правильно создать JSON в javascript?

275

27 мая 2017, 18:32

вот код html

<ul id="menu-to-edit" class="sortable-ui ui-sortable">
    <li class="ui-state-default wells"  data-depth="0" data-title='1' data-item-id="1">1</li>
    <li class="ui-state-default wells col-md-offset-1" data-depth="1" data-title='2' data-item-id="2" data-parent-id="1" >2</li>
    <li class="ui-state-default wells col-md-offset-1" data-depth="2" data-title='3' data-item-id="3"  data-parent-id="1" >3</li>
    <li class="ui-state-default wells" data-depth="0" data-title='4' data-item-id="4">4</li>
    </ul>

есть и другие дата атрибуты то я не пишу их что бы не захламлять (не в них суть)вот таким образом получаю дата атрибут

$( "#menu-to-edit li" ).each(function (i) {
    var model = $(this).data('model');// это те атрибуты которые не указал 
     var alias = $(this).data('alias');// это те атрибуты которые не указал 
     var depth = $(this).attr('data-depth');
     var title=$(this).data('title');
     var key = 'menu' + i;
     var addmenu = {title: title,  model: model,alias:alias,depth:depth};
     menu[key] = addmenu;
     console.log(JSON.stringify(menu));

получаю такой json

{
    "menu0":{
        "title":"1",
        "model":"Category",
        "alias":"catedory",
        "depth":"0"},
    "menu1":{
        "title":"2",
        "model":"Category",
        "alias":"catedory",
        "depth":"1"},
    "menu2":{
        "title":"3",
        "model":"Category",
        "alias":"catedory",
        "depth":"2"},
    "menu3":{
        "title":"4",
        "model":"Category",
        "alias":"catedory",
        "depth":"0",}
}

а хотелось бы, что бы получился такой json по уровню depth

 {
        "menu0":{
            "title":"1",
            "model":"Category",
            "alias":"catedory",
            "depthMenu":{
                "menu1":{
                    "title":"2",
                    "model":"Category",
                    "alias":"catedory",
                    "depthMenu":{
                    "menu2":{
                        "title":"3",
                        "model":"Category",
                        "alias":"catedory"}
                    }
                }
            }
        },
        "menu3":{
            "title":"4",
            "model":"Category",
            "alias":"catedory"}
    }

пытался сделать так

if(depth>0){
    var siblingItemDepht=depth-1;
}

но дальше не могу сообразить что сделать.

Answer 1

Как-то так.

Поменял немного ключ (key), привязал его к data-item-id, иначе тяжело поиск родителя сделать. Из-за этого нумерация начинается с 'menu1', а не с 'menu0'.

var menu = {}; 
$( "#menu-to-edit li" ).each(function (i) { 
 var model = $(this).data('model');  
 var alias = $(this).data('alias'); 
 var depth = parseInt($(this).data('depth')); 
 var title = $(this).data('title').toString(); 
 var key = 'menu' + $(this).data('item-id'); 
 var addmenu = { title: title, model: model, alias:alias }; 
 
 var parentKey = 'menu' + $(this).data('parent-id'); 
 var parent = menu[parentKey]; 
 if (parent) { 
   for (var j = depth; j > 1 && parent; j--) { 
     parent = parent.depthMenu; 
   } 
   if (parent) parent.depthMenu = addmenu; 
 } 
 else { 
   menu[key] = addmenu; 
 } 
}); 
$('#result').html(JSON.stringify(menu, "", 4));

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<ul id="menu-to-edit" class="sortable-ui ui-sortable"> 
<li class="ui-state-default wells" data-model="Category" data-alias="category" data-depth="0" data-title='1' data-item-id="1">1</li> 
<li class="ui-state-default wells col-md-offset-1" data-model="Category" data-alias="category" data-depth="1" data-title='2' data-item-id="2" data-parent-id="1" >2</li> 
<li class="ui-state-default wells col-md-offset-1" data-model="Category" data-alias="category" data-depth="2" data-title='3' data-item-id="3"  data-parent-id="1" >3</li> 
<li class="ui-state-default wells" data-model="Category" data-alias="category" data-depth="0" data-title='4' data-item-id="4">4</li> 
</ul> 
 
<hr/> 
 
<pre id='result'></pre>