Форум

gERYH · #1 (**permalink**) 17.01.2016, 05:44

Приветствую Вас, дорогие постояльцы данного форума. У меня возникла проблема с построением иерархического дерева на нативном JS. Вроде функция не должна быть сложной: запуск и пробежка по объекту с помощью рекурсии, но всё же в тупик эта функция меня завела. Итак, меньше болтавни, больше кода)

Вот исходный объект

var beginObj = {
  0: {
    parent: 1
  },
  1: {
    parent: 4
  },
  2: {
    parent: 3
  },
  3: {
    parent: 4
  },
  4: {
    parent: ""
  },
  5: {
    parent: ""
  },
  6: {
    parent: ""
  },
  7: {
    parent: 8
  },
  8: {
    parent: ""
  },
  9: {
    parent: 10
  },
  10: {
    parent: ""
  }
};

А вот уже конечный объект который должен получится после пробежки по циклу

var endObj = { 
  4: { 
    1: { 
    	0: "" 
    }, 
    3: { 
    	2: "" 
    } 
  }, 
  5: "", 
  6: "", 
  8: { 
  	7: "" 
  }, 
  10: { 
  	9: "" 
  } 
};

Ну и мои наработки (если конечно в них есть смысл...)

for(var key in beginObj){
	if(endObj[beginObj[key].parent]) endObj[beginObj[key].parent] = endObj[beginObj[key].parent];
  else endObj[beginObj[key].parent] = {};
  
  if(beginObj[key].parent) endObj[beginObj[key].parent][key] = "";
  else {
  	if(!endObj[key]) endObj[key] = "";
    else endObj[key] = endObj[key];
  } 
}

P.S. Я понимаю, что такому быдлокодеру, как я не место в этом бренном мире, но буду очень благодарен за помощь)
Вот аналогия реализованная на php - http://phpdes.com/php/postroenie-der...php-rekursiya/

caetus · #2 (**permalink**) 17.01.2016, 10:49

логика есть ?

gERYH · #3 (**permalink**) 17.01.2016, 11:41

Логика, была, но после 3 дней издевательств над кодом, она ушла в небытие. Ну, по сути необходимо слепить рекурсивную функцию, которая будет пробегаться по массиву, читать парент и заносить данные в другой массив (в моём случае я оптимальным решением выбрал объект). Просто не могу понять как сделать универсальную проверку, в которой будет проверятся, наличие следующего элемента в объекте (вниз по дереву). Аналогия тому что я хочу реализовать это бесконечное меню на php, вот ссылка - http://phpdes.com/php/postroenie-der...php-rekursiya/ . Пытался слепить по аналогии, но как-то не пошло( Помогите пожалуйста.

рони · #4 (**permalink**) 17.01.2016, 13:58

Сообщение от gERYH

которая будет пробегаться по массиву

так массив и надо было делать, а не обьект ...
в прошлый раз решение было такое ... где-то на форуме лежит дубликат

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type='text/css'>
      li > ul {
    display: none;
  }
  li.opened > ul {
    display: block;
  }
  .selfSwitcher  {
     color: red;
     cursor: pointer;
  }
  .selfSwitcher > ul {
     color: #0000FF;
      cursor: default;
  }
  </style>



<script>
window.onload=function(){
var beginObj = {
    0: {
        parent: 1
    },
    1: {
        parent: 4
    },
    2: {
        parent: 3
    },
    3: {
        parent: 4
    },
    4: {
        parent: ""
    },
    5: {
        parent: ""
    },
    6: {
        parent: ""
    },
    7: {
        parent: 8
    },
    8: {
        parent: ""
    },
    9: {
        parent: 10
    },
    10: {
        parent: ""
    }
};
/* переделка обьекта в массив */
var data = Object.keys(beginObj).map(function (key,i) {

  return {"id" : key,"cat_name":"Dashboard"+i,"parent": beginObj[key].parent  }

});
var n = 0 ;
function rec(data) {
    var f = document.createElement('ul');
      for (var i=0; i<data.length; i++)  {
      var li = data[i];
      var parentId = '_'+li.parent;
      var liParent = f.querySelector('#'+parentId);
      if (!liParent) {
      liParent = document.createElement('li');
      liParent.id = parentId;
      f.appendChild(liParent);
      } ;
      var ul = liParent.querySelector('ul');
      if(!ul) {
          liParent.className = 'selfSwitcher';
          ul = document.createElement('ul');
          liParent.appendChild(ul)
      };
      var liId = '_'+li.id;
      var liText = li.cat_name;
      li = f.querySelector('#'+liId);
      if(!li) {
         li = document.createElement('li');
         li.id = liId;
      }
      li.insertBefore(document.createTextNode(liText),li.firstChild );
      ul.appendChild(li)
    }
    f.firstChild.insertBefore(document.createTextNode('menu'), f.firstChild.firstChild )
    x.appendChild(f)

}
rec(data);


 Array.prototype.forEach.call(document.querySelectorAll(".selfSwitcher"), function(c) {
    c.addEventListener("click", function(a) {
        a = a.target;
        a == c && a.classList.toggle("opened")
    })
});
}
</script>


</head>
<body>
  <div id="x"></div>

</body>


</html>

Форум

Справочник

Discord чат

Курсы javascript