Create a menu from JSON Object – jQuery

Here i will explain how to build a menu from JSON object which contains parentid, text, position. text is menu text, parentid denotes the menu’s parent and position is for set the menu display position.

First include the jquery library file.

<script type="text/javascript" src="jquery.min.js"></script>

JSON object which is used here:

	var data = [
	{
		"text": "Menu1",
		"id": "1",
		"parentid": "-1",
		"position": "1"
	}, {
		"id": "2",
		"parentid": "1",
		"text": "Menu2",
		"position": "1.1"
	}, {
		"id": "3",
		"parentid": "1",
		"text": "Menu3",
		"position": "1.3"
	}, {
	   "id": "4",
		"parentid": "1",
		"text": "Menu4",
		"position": "1.2"
	}, {
		"id": "5",
		"parentid": "1",
		"text": "Menu5",
		"position": "1.4"
	}, {
		"id": "6",
		"text": "Menu6",
		"parentid": "-1",
		"position": "3"
	}, {
		"id": "7",
		"parentid": "6",
		"text": "Menu7",
		"position": "3.2"
	}, {
		"id": "8",
		"text": "Menu8",
		"parentid": "6",
		"position": "3.1"
	}, {
		"id": "9",
		"text": "Menu9",
		"parentid": "6",
		"position": "3.3"
	}, {
		"id": "10",
		"text": "Menu10",
		"parentid": "6",
		"position": "3.4"
	}, {
		"id": "11",
		"text": "Menu11",
		"parentid": "6",
		"position": "3.5"
	}, {
		"id": "12",
		"text": "Menu12",
		"parentid": "-1",
		"position": "2"
	}, {
		"id": "13",
		"text": "Menu13",
		"parentid": "12",
		"position": "2.2"
	}, {
		"id": "15",
		"text": "Menu14",
		"parentid": "13",
		"position": "2.1.2"
	}, {
		"id": "16",
		"text": "Menu15",
		"parentid": "13",
		"position": "2.3.1"
	}, {
		"id": "17",
		"text": "Menu16",
		"parentid": "13",
		"position": "2.3"
	}, {
		"id": "14",
		"text": "Menu17",
		"parentid": "12",
		"position": "2.1"
	}];

Now, we need to sort the above JSON object based on the position.

function sortJSON(data, key) {
	return data.sort(function (a, b) {
		var x = a[key],y = b[key];
		return ((x  y) ? 1 : 0));
	});
}

After sorting create a below javascript function.

function createMenu(data){
	var sortMenu = sortJSON(data, 'position');
	var child1=0,j=0,k=false,menu='<nav><ul class="nav">';
	var regex = new RegExp(/\./g)
	for(var i=0;i<sortMenu.length;i++){
		if((sortMenu[i].position).match(/\./g)) child1 = (sortMenu[i].position).match(/\./g).length;
		if(child1 != j){
			k = true;
			if(child1 < j){
				for(d=0;d<(j-child1);d++)
					menu += "</li></ul>";
				k = false;
			}
			j = child1;
		}
		if((sortMenu[i].position).match(/\./g)){
			if(k){
				menu += "<ul>";
				k = false;
			}
		   
			if(menu.substr(menu.length - 4)=="</a>" || menu.substr(menu.length - 5)=="</ul>")
				menu += "</li>";
			menu += "<li><a id='"+sortMenu[i].id+"' href='"+sortMenu[i].position+"'>"+sortMenu[i].position+"</a>";
		}
		else{
			for(var c=0;c<child1;c++){
				menu += "</li></ul>";
			}
			if(menu.substr(menu.length - 4)=="</a>" || menu.substr(menu.length - 5)=="</ul>")
				menu += "</li>";
			menu += "<li><a id='"+sortMenu[i].id+"' href='"+sortMenu[i].position+"'>"+sortMenu[i].position+"</a>";
			j = 0;
		}
	}
	for(var c=0;c<child1;c++){
		menu += "</li></ul>";
	}
	return menu+"</li></ul>";
}

Finally, call the createMenu(data) function in $(document).ready().

$(document).ready(function(){
	var ss = createMenu(data);
	$("#ss").html(ss); // #ss = <div id="ss"></div>
});

Leave a Reply

Your email address will not be published. Required fields are marked *