Develop a Treeview using the selection of lists using the 'li' element and Json information

Question

Develop a Treeview using the selection of lists using the 'li' element and Json information

I need assistance in creating a tree view using a list of items in ul li and JSON data. The tree view hierarchy should show the selected list item at the first level, followed by corresponding values from the JSON data at the next level. Please guide me on how to achieve this.

I have included an OUTPUT example of a treeview with selected li items along with my data.

JSON DATA The format will be similar for all list elements

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

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

})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects">
  <ul class="menu" id="projects-menu">
  </ul>
</div>

Desired Output https://i.sstatic.net/7OXeX.png

javascript html jquery css json

Answer 1

Answer №1

If you want to create all the sub li elements, you can utilize the following method:

Object.values(data.info): ...retrieve an array containing the property values of a specified object...

Based on your feedback, I have introduced a new function named createList:

1st parameter: where to add the newly generated list
2nd parameter: the object or an array of objects
3rd parameter: the value of the clicked element to search within the object(s)

Updated Code Snippet:

function createList(AppendToEle, obj, searchFor, currEle) {
  var objToUse = null;

  if (obj.constructor == Array) {
      obj.forEach(function(ele) {
          if (ele.project_name.toLowerCase() == searchFor.toLowerCase()) {
              objToUse = ele;
          }
      });
  }
  if (obj.constructor == Object) {
      if (obj.project_name.toLowerCase() == searchFor.toLowerCase()) {
          objToUse = obj;
      }
  }
  if (objToUse != null) {
      if (AppendToEle.find('.divList.' + objToUse.project_name.toLowerCase()).length != 0) {
          if ($(currEle).is('.selected')) {
              AppendToEle.find('.divList.' + objToUse.project_name.toLowerCase()).parent().remove();
          } else {
              console.log('Error: list (' + objToUse.project_name.toLowerCase()+  ' ) already created!');
          }
          return;
      }

      var div = $('<div/>');
      div.append($('<ul/>', {class: 'divList ' + objToUse.project_name.toLowerCase()}).append($('<li/>', {value: objToUse.project_name, text: objToUse.project_name})
              .prepend('<span class="glyphicon glyphicon-triangle-bottom">&nbsp;</span>')).append($('<ul/>')));
      Object.values(objToUse.info).forEach(function(val) {
          div.find('ul:last').append($('<li/>', {value: val, text: val}));
      });
      div.find('ul:first').on('click', function(e) {
          var isVis = !$(this).find('ul').is(':visible');
          $(this).find('ul').toggle(isVis);
          $(this).find('span.glyphicon ').toggleClass('glyphicon glyphicon-triangle-top glyphicon glyphicon-triangle-bottom');
      })
      AppendToEle.append(div);
  }
}

var data = {
  project_name: 'Sales1',
  info: {
      Value1: 'Value1',
      Value2: 'Value2'
  }
};
var data1 = [{
  project_name: 'Sales2',
  info: {
      Value1: 'Value2',
      Value2: 'Value2'
  }
},
  {
      project_name: 'Sales1',
      info: {
          Value1: 'Value1',
          Value2: 'Value1'
      }
  }];

$('#projects-menu').append("<li  value='sales1'>Sales 1</li>")
$('#projects-menu').append("<li  value='sales2'>Sales 2</li>")

$(document).on('click', '#projects-menu > li', function (event) {
  event.preventDefault();
  if (event.ctrlKey) {

      // dynamically create the list...
      createList($('body'), data1, this.getAttribute('value'), this);

      if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
      } else {
          $(this).addClass("selected");
      }
  } else {
      $("#projects-menu > li").removeClass("selected");
      $(this).addClass("selected");
  }
});

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

ul.divList li {
    list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

Answer 2

If you want to create all the sub li elements, you can utilize the following method:

Object.values(data.info): ...retrieve an array containing the property values of a specified object...

Based on your feedback, I have introduced a new function named createList:

1st parameter: where to add the newly generated list
2nd parameter: the object or an array of objects
3rd parameter: the value of the clicked element to search within the object(s)

Updated Code Snippet:

function createList(AppendToEle, obj, searchFor, currEle) {
  var objToUse = null;

  if (obj.constructor == Array) {
      obj.forEach(function(ele) {
          if (ele.project_name.toLowerCase() == searchFor.toLowerCase()) {
              objToUse = ele;
          }
      });
  }
  if (obj.constructor == Object) {
      if (obj.project_name.toLowerCase() == searchFor.toLowerCase()) {
          objToUse = obj;
      }
  }
  if (objToUse != null) {
      if (AppendToEle.find('.divList.' + objToUse.project_name.toLowerCase()).length != 0) {
          if ($(currEle).is('.selected')) {
              AppendToEle.find('.divList.' + objToUse.project_name.toLowerCase()).parent().remove();
          } else {
              console.log('Error: list (' + objToUse.project_name.toLowerCase()+  ' ) already created!');
          }
          return;
      }

      var div = $('<div/>');
      div.append($('<ul/>', {class: 'divList ' + objToUse.project_name.toLowerCase()}).append($('<li/>', {value: objToUse.project_name, text: objToUse.project_name})
              .prepend('<span class="glyphicon glyphicon-triangle-bottom">&nbsp;</span>')).append($('<ul/>')));
      Object.values(objToUse.info).forEach(function(val) {
          div.find('ul:last').append($('<li/>', {value: val, text: val}));
      });
      div.find('ul:first').on('click', function(e) {
          var isVis = !$(this).find('ul').is(':visible');
          $(this).find('ul').toggle(isVis);
          $(this).find('span.glyphicon ').toggleClass('glyphicon glyphicon-triangle-top glyphicon glyphicon-triangle-bottom');
      })
      AppendToEle.append(div);
  }
}

var data = {
  project_name: 'Sales1',
  info: {
      Value1: 'Value1',
      Value2: 'Value2'
  }
};
var data1 = [{
  project_name: 'Sales2',
  info: {
      Value1: 'Value2',
      Value2: 'Value2'
  }
},
  {
      project_name: 'Sales1',
      info: {
          Value1: 'Value1',
          Value2: 'Value1'
      }
  }];

$('#projects-menu').append("<li  value='sales1'>Sales 1</li>")
$('#projects-menu').append("<li  value='sales2'>Sales 2</li>")

$(document).on('click', '#projects-menu > li', function (event) {
  event.preventDefault();
  if (event.ctrlKey) {

      // dynamically create the list...
      createList($('body'), data1, this.getAttribute('value'), this);

      if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
      } else {
          $(this).addClass("selected");
      }
  } else {
      $("#projects-menu > li").removeClass("selected");
      $(this).addClass("selected");
  }
});

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

ul.divList li {
    list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

Develop a Treeview using the selection of lists using the 'li' element and Json information

Answer №1

Similar questions

Customize the List Box Appearance for a Specific HTML Item (Option)

JavaScript Brainfuck Compiler

Deciphering a JSON Array in JavaScript to extract specific components

Most efficient method for updating ASP.NET page with Javascript

"Maximizing efficiency with Jquery and handling multiple AJAX requests simultaneously on a

Extracting the name from a JSON key/value pair and then adding it to a TextField

Dynamic div that automatically adjusts its height ratio to fit its parent container

Storing data as a JSON string in a JavaScript object and saving it to

Troubleshooting Issues with JavaScript Counter and JSON Integration

What is the method for displaying the html required attribute in Django forms?

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

Rendering with ReactDom in a SharePoint Framework application

Utilizing jQuery to scrape HTML and dynamically manipulate elements

Tips for setting the tabindex on an element that has an opacity of 0

Adding space between the cells on the far left and far right of the table and the border

Utilize external options for Chart.js datasets with added functionality

One-time execution of timed event

Align a flex item at the center of its parent when the parent has a flex direction of column

Hide dropdown when clicked outside of it

Creating a mobile/tablet friendly menu design