Question

I have a dynamically created xml file that contains a record with five descriptor fields. One of these is a node called “category”. I haven’t been able to find a straight answer on this anywhere. So if I had an xml file that had

<test>
   <name>Ferarri</name>
   <category>Cars</category>
</test>
<test>
   <name>Maserati</name>
   <category>Cars</category>
</test>
<test>
   <name>John Deere</name>
   <category>Trucks</category>
</test>
<test>
   <name>Ford F350</name>
   <category>Trucks</category>
</test>

Is there a way to present to the user the category field name as a list divider and then those records that contain that category node be listed below? Like below. Of course CSS styling does not apply here.

Cars
-Ferrari
-Maserati
Trucks
-John Deere
-Ford F350

Thanks for any help/tips!

From Neil’s answer (WORKS!):

 $(document).ready(function(){

                            $.ajax({
                                   type: "GET",
                                   url: "testlist.xml",
                                   dataType: "xml",
                                   success: function(xml) {
                                   var $body = $("#test-content");
                                   var $ul = $("#testList"); 
                                   var categories = new Object();
                                   var category;
                                   $(xml).find('test').each(function(){
                                                            category = $('category', this).text();
                                                            if (categories[category] == undefined){
                                                            categories[category] = $('name"', this).text();
                                                            } else {
                                                            categories[category] += ',' + $('name', this).text();
                                                            }
                                                            });
                                   for (category in categories) {
                                   $body.append('<h1>' + category + '</h1>');
                                   var vehicles = categories[category].split(',');
                                   $ul = $body.append('<ul></ul>');
                                   for (var i=0; i<vehicles.length; i++){
                                   $ul.append('<li><div data-role="collapsible" data-collapsed="true" data-theme="b"></h3>' + vehicles[i] + '</div></li>');
                                   }
                                   }
                                   }
                                   });
                            });

HTML where trying to load content:

<div data-role="page" id="testcatalog">
            <div data-role="content" id="test-content">
                <!--CONTENT SHOULD LOAD HERE-->  
            </div>

Answer 1

Deon,

I would use an “associative array” which uses the “categories” as keys and appends the “name” for each category. One the assosiative array is populated then you can iterate over the keys (categories) and extract the names. e.g.

$.ajax({
    type: "GET",
      url: "vehicles.xml",
    dataType: "xml",
    success: function(xml) {
        var $body = $('body');
        var $ul; 
        var categories = new Object();
        var category;
            $(xml).find('test').each(function(){
            category = $('category', this).text();
            if (categories[category] == undefined){
                categories[category] = $('name', this).text();
            } else {
                categories[category] += ',' + $('name', this).text();
            }
        });
        for (category in categories) {
            $body.append('<h1>' + category + '</h1>');
            var vehicles = categories[category].split(',');
            $ul = $body.append('<ul></ul>');
            for (var i=0; i<vehicles.length; i++){
                $ul.append('<li>' + vehicles[i] + '</li>');
            }
        }
    }
});

I hope this answers your question.

Regards
Neil