Question

I’m learning JQuery and I’ve run into a problem I can’t seem to get around…

I have an XML document that looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<food>
    <group name="Red">
        <item name="Apple" type="Fruit">
        <item name="Onion" type="Veggie">
    </group>
    <group name="Yellow">
        <item name="Banana" type="Fruit">
        <item name="Pineapple" type="Fruit">
    </group>
    <group name="Orange">
        <item name="Carrot" type="Veggie">
        <item name="Orange" type="Fruit">
    </group>
</food>

and right now I’m using this:

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "xml/food.xml",
        dataType: "xml",
        success: foodXML
    }); // close ajax
});

function foodXML(xml) {

    $(xml).find('item').each(function() {
        $('#foodItem').append('<li>' + $(this).attr("name") + '</li>');
    });

}

to get this:

Apple
Onion
Banana
Pineapple
Carrot
Orange

But what I’m trying to get it to do is list them like this:

A
Apple
Onion
B
Banana
Pineapple
C
Carrot
Orange

Any help? I just can’t seem to get my head around this.

Answer 1

Look at the groups, then iterate over it’s children. For example,

function foodXML(xml) { 

    var $fooditem = $('#foodItem');

    $('group', xml).each(function() {
          var $items = $('item', this);
          if( $items.length ){
              $fooditem.append('<li>' + $items.first().attr("name").charAt(0) + '</li>');
              $items.each(function(){
                   $fooditem.append('<li>' + $(this).attr("name") + '</li>');
              });
          }
    });

}