Используйте поле xml в качестве разделителя списка, используя jquery / jquery mobile

Question

У меня есть динамически созданный XML-файл, который содержит запись с пятью полями дескриптора. Одним из них является узел под названием «категория». Я не смог найти прямой ответ на этот вопрос нигде. Так что, если бы у меня был XML-файл, который имел

<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>

Есть ли способ представить пользователю имя поля категории в качестве разделителя списка, а затем перечислить те записи, которые содержат этот узел категории? Как ниже. Конечно, стилизация CSS здесь не применима.

Автомобили -Ferrari -Maserati Грузовые автомобили -Джон Дир -Ford F350

Спасибо за любую помощь / советы!

Из ответа Нейла (РАБОТАЕТ!):

 $(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, где пытается загрузить контент:

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

Answer 1

Deon,

Я бы использовал «ассоциативный массив», который использует «категории» в качестве ключей и добавляет «имя» для каждой категории.Заполнив один ассоциативный массив, вы можете перебирать ключи (категории) и извлекать имена.например,

$.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>');
            }
        }
    }
});

Я надеюсь, что это отвечает на ваш вопрос.

С уважением, Нил