Create treeview based on li list selection and json data

See more:

CSS

HTML

jQuery

I have a scenario to create tree view with List of items in ul li and json data, based on my selection of list item a treeview should be created separately.In tree view heirarchy the first level will be the selected items from list and its corresponding next level will be the values from json data.please help me with this.

In the code below I have done a list.so when I select that list item on the right side a tree view should be created from json data

I have posted a link which show the OUTPUT of treeview I want.

treeview1 — Postimages[^]

What I have tried:

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");
    }
  });

})