stackoverflow

http://stackoverflow.com/questions/34265613/group-xml-by-parent-id-into-ul-li-html

HTML

<div id="result">
		
	</div>

JavaScript

var xml = '<list><item> <id>1</id> <ParentID>100</ParentID> <Seq>1</Seq></item><item> <id>2</id> <ParentID>100</ParentID> <Seq>2</Seq></item><item> <id>3</id> <ParentID>200</ParentID> <Seq>5</Seq></item><item> <id>4</id> <ParentID>100</ParentID> <Seq>3</Seq></item><item> <id>5</id> <ParentID>100</ParentID> <Seq>4</Seq></item><item> <id>6</id> <ParentID>200</ParentID> <Seq>1</Seq></item><item> <id>7</id> <ParentID>200</ParentID> <Seq>2</Seq> </item><item> <id>8</id> <ParentID>200</ParentID> <Seq>4</Seq></item><item> <id>9</id> <ParentID>200</ParentID> <Seq>3</Seq></item><item> <id>10</id> <ParentID>200</ParentID> <Seq>6</Seq></item></list>';
	

	xml = $.parseXML(xml);
	var _html = '';
	var category = [];
	var categoryName;

	$(xml).find('item').each(function(){
		var _parent = $(this).find('ParentID').html();
    alert(_parent);
		if(category[_parent] != undefined){
			category[_parent].push((this));
		}else {
			category[_parent] = [];
			category[_parent].push((this));
		}
	});

	categoryName = Object.keys(category);

	_html += '<ul>';
	console.log(categoryName.length);
	for(var i = 0; i<categoryName.length; i++){
		var sCategory = category[categoryName[i]];
		var sCategoryName = categoryName[i];

		_html+= '<li id="item-'+ sCategoryName +'" parentid="'+ sCategoryName +'">';
		_html+= '<h4>Item '+ sCategoryName +'</h4>'
		_html+= '<ul class="sortConn">';
		for(var j = 0; j<sCategory.length; j++){
			_html+= '<li id="item-' + $(sCategory[j]).find('id').html() +'" class="ui-state-default">Item '+ $(sCategory[j]).find('id').html() +'</li>'
		}
		_html+= '</ul>';
		_html+= '</li>';
	}
	_html += '</ul>';
	$('#result').html(_html);