Создание treeview на основе выбора списка li и данных json

---

У меня есть сценарий создания древовидного представления со списком элементов в данных ul li и json, основанный на моем выборе элемента списка, treeview должен быть создан отдельно.В древовидном представлении heirarchy первым уровнем будут выбранные элементы из списка, а соответствующим следующим уровнем-значения из данных json.пожалуйста, помогите мне в этом.

В приведенном ниже коде я сделал следующее list.so когда я выбираю этот элемент списка справа, из данных json должно быть создано древовидное представление

Я опубликовал ссылку, которая показывает вывод treeview, который я хочу.

treeview1 — Postimages[^]

Что я уже пробовал:

формат JSON

data={
  project_name: 'Sales1',
  info: {
    Value1: 'Value1',
    Value2: 'Value2'
   }
}

HTML

<div class="projects">
  <ul class="menu" id="projects-menu">
  </ul>
</div>

CSS

ul.menu {
  margin-top: 30px;
  list-style-type: none;
}

ul.menu li {
  background-color: #e0e0e0;
  padding: 8px 12px;
  border: solid 2px white;
  cursor: pointer;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
}

ul.menu li:hover {
  background-color: #A9A9A9;
}

ul.menu li.selected {
  background-color: #23ac61;
}

ul.menu li.disabled:hover {
  background-color: #e0e0e0;
  cursor: default;
}

В jQuery

<pre>$(document).ready(function() {
  $('#projects-menu').append("<li  value='sales1'>Sales 1</li>")
 

  $(document).on('click', '#projects-menu > li', function(event) {
    event.preventDefault();
    if (event.ctrlKey) {
      if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
      } else {
        $(this).addClass("selected");
      }
    } else {
      $("#projects-menu > li").removeClass("selected");
      $(this).addClass("selected");
    }
  });

})

---