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

Question

[Сергей Беловенцев]

вот код html

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

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

$( "#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

[eeiaao]

Надо изменить концепт. В элементах списка стоит завести атрибуты data-id и data-parent (сюда класть id родителя), a data-depth убрать. Полученный "плоский" json тогда можно будет распарсить и раскидать объекты в соответствии с заданной иерархией.

Comments

[Сергей Беловенцев]

Я предполагал так, найти первый элемент у которого depth на 1 меньше чем у вложенного и таким образом определить родителя. Для этого и пытаюсь сделать так if(depth>0){ var siblingItemDepht=depth-1; }.То есть все элементы первого уровня окажутся под первым нулевым.

[eeiaao]

Сергей Беловенцев: а если несколько элементов с детьми на одном уровне вложенности - какой выбрать для очередного ребёнка?

[Сергей Беловенцев]

все элементы первого уровня окажутся под первым нулевым. То есть находить первый элемент с data-depth= data-depth(ребенка -1)

[eeiaao]

Сергей Беловенцев: нерасширяемый подход

{
  "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"}, // а я лежу в том, который не знает куда деться. хотя погодите. а что если он не один с depth===1? x_x
  "menu3":{
    "title":"4",
    "model":"Category",
    "alias":"catedory",
    "depth":"0",} , // мне тоже всё по барабану
}