Ok so as the brilliant Jeremiah Sandahl has posted earlier, you can make some pretty brilliant hierarchy charts using the plugin jOrgChart.js . You can read his post on Visualizing Hierarchy with jQuery.

Now that you know how to make brilliant charts, what do you do if you want to make changes? We found ourselves needing just that. Here is my blog on how we parsed jOrgCharts into JSON calls.

Step 1:

Make your jOrgChart. You can refer to Jeremiah’s post. One added input for charts that you plan to make changes to. The <ul> you are using as your reference list needs to be stored in a separate div than the chart itself. You will notice that for draggable lists where you drag one person to another column needs this in order to keep any changes.

Step 2:

Define what your database needs. Ours needed a userID and an array of their hierarchy. this formats to {user.key: “4”, user.hierarchy: “1.2.3.4”}

Basically this was the users ID followed by a list of who they report to, from the top level all the way down to themselves.

Now that I know that, I know just what I want my JSON to look like.

Step 3: parse the <ul> into an object. I creatively named mine “hierarchy”. Here is my code.

function makeArrays()
		{
			var hierarchy = [];

			$("#org li").each(function(){
				var uid = $(this).attr("id");
				var name = $(this).clone().children().remove().end().text();
				var hidSTR = "";
				var hid = $(this).parents("li");
				if(hid.length == 0) //If this object is the root user, substitute id with "orgName" so the DB knows it's the name of organization and not a user
				{
					hidSTR = "orgName ";
					var user = new Object();
					user.key = uid;
					user.hierarchy = hidSTR;
					hierarchy.push(user);
				}else{
					for(var i=hid.length-1; i>=0; i--)
					{
						if(i != hid.length-1)
						{
							hidSTR = hidSTR+hid[i].id+".";
						}else{
							hidSTR = hidSTR+""+hid[i].id;
						}
					}
				var user = new Object();
					user.key = uid;
					user.hierarchy = hidSTR;
					hierarchy.push(user);
				}
			});
			saveArray(hierarchy);

		}

Ok so its pretty clear a lot went on there. Some things we needed were to substitute the organizationID with “orgName” so that our DB knew it wasn’t a user. We also did a reverse for each loop that saves from the bottom of the list all the way to it’s top parents. You might need to play around with some of the object paths according to how your list was built.

Now the last executable line of code sends the object to a function called “saveArray”. This is the actual JSON post that sends it to the DB for preservation. Here is that code.

function saveArray(hierarchy){
	var url = urlYouSendObjectTo; 
	$.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json',
            data:  JSON.stringify(hierarchy),
            dataType: 'json',
			success: function(data){
				alert("this has been successful");
				}
        });

}

This function sends the hierarchy object to “url” which is wherever you need your post to go to, and then alerts success once it gets a good response from your server.

This is my crash course in parsing jOrgCharts into JSON. Thank you for your time!