Build a JSON class from existing <ul> html

November 21, 2016, at 9:58 PM

I have a jQuery plugin that displays an organization chart based off a <ul> heirarchy.

This will allow my users to drag and drop employees around, and once dropped, an event fires telling me the DOM has changed. At this point I want to read the <ul>, and build a JSON class off it so I can send it to my server (ASP .NET MVC) for further processing.

Are there any libraries out there that can do this for me, and if not, how would I go about doing it myself?

An example of the html:

<ul id="org" style="display:none">
        <li><a href="" target="_blank">Aubergine</a></li>
        <li>Reese's Cups</li>
Answer 1

You need to loop through the dom node and create the proper json as following:

var getTreeData = function(parentNode){
    var nodes = [];
    var $parentNode = $(parentNode);
    $parentNode.children('li').each(function(index, li){
    var nodeData = {};
    var nodeText = $(li).contents().filter(function() {
  return this.nodeType == 3;
    nodeData.text = nodeText.trim().replace('\n', '');
        nodeData.children = getTreeData($(li).children('ul'))
    return nodes;

Now call the getTreeData function passing the parent tree ul as following:

var treeData = getTreeData($('#org'));

Here is the complete fiddle example:

Rent Charter Buses Company
How to have a click event for button in jquery?

How to have a click event for button in jquery?

here what i am trying to do is when i click on the button i want to get a confirm box and if i press ok the data must be deleted. I have done using ajax.

How to move tr by parameter?

How to move tr by parameter?

I am having second table constructions:.

How to disable jqgrid row cell?

How to disable jqgrid row cell?

I want to disable row cell in Jqgrid in loadcomplete. I am using this code:.