JQuery XML Parser Format help

Question

I am in need of a technical expertise inorder to format XML and render in below html format. i have been using JQuery XML parser and i need help in constructing the html portion alone.

Data.xml

<xml>
<rs:data>
<z:row Category="Sales " URLMenu="http://www.abc.com, Sales.com" /> 
<z:row Category="Products" URLMenu="http://www.google.com, Products.com" /> 
<z:row Category="Sales "URLMenu="http://www.abc.com/services, Services.com" /> 
<z:row Category="Products" URLMenu="http://www.citigroup.net, Financial.com" />
<z:row Category="Products" SubCategory="International" URLMenu="http://www.google.com,      United States" /> 
<z:row Category="Products" SubCategory="International" URLMenu="http://www.googe.com, Australia" />  
</rs:data></xml>

JQuery function

<script type="text/javascript">
    $(document).ready(function () {
        var thisHtml = '';
        var url = 'xml/Data.xml';
        $.get(url, function (d) {
            $(d).find('z\\:row').each(function () {
                thisHtml += '<ul>';
                {
                    thisHtml += '<li><a href="">' + $(this).attr("Category") + '</a></li>';
                }
                thisHtml += '</ul>';
            });                $('bd').append($(thisHtml));
        });
    });
</script>

Below is the HTML Snippet that needs to be dynamically created

<ul>
<li>Sales
    <ul>
        <li><a>Sales.com</a></li>
        <li><a>Products.com</a></li>

    </ul>
</li>
<li>Products
    <ul>
        <li><a>Services.com</a></li>
        <li><a>Financial.com</a></li>
        <li>International
            <ul>
                <li><a>United States</a></li>
                <li><a>Australia</a></li>
            </ul>
        </li>
    </ul>
</li>                                                        

The required html groups all categories under same name and URLMenu listed as separate. Since i am new to JQuery could you please help me in looping and rendering?

Thanks

Answer 1

If you have a fixed set of categories, you could use the following selector for the each-block and render the items sequentially:

$(d).find('z\\:row[Category="Sales"]').each(...);
$(d).find('z\\:row[Category="Products"]').each(...);

Otherwise, I guess you would have to traverse the data twice, in order to group data by category in the first run, and print the grouped data in the second.

You might also want to consider using a templating plugin for rendering the HTML, such as this one: http://api.jquery.com/tmpl/