jquery parse xml and group by element value

I have the following xml which I parse using jquery.

However I'm stuck at displaying only the cities and dates grouped by the title. How can I parse the xml so that the final output would be like this

Test event 1 - oslo(2011/08/11), dallas(2011/11/11)

Test event 2 - new york(...), seattle(...)

Any Help would be appreciated,

Thanks, Terry

<root>
    <item guid="np_108886">
        <title>Test event 1</title>
        <description>lorem ipsum</description>
        <specfields>
            <city>oslo</city>
            <startdate>2011/08/11</startdate>
        </specfields>
    </item>

    <item guid="np_108886">
        <title>Test event 1</title>
        <description>lorem ipsum</description>
        <specfields>
            <city>dallas</city>
            <startdate>2011/11/11</startdate>
        </specfields>
    </item>

    <item guid="np_108886">
        <title>Test event 2</title>
        <description>lorem ipsum</description>
        <specfields>
            <city>new york</city>
            <startdate>2011/09/11</startdate>
        </specfields>
    </item>
开发者_运维问答    <item guid="np_108886">
        <title>Test event 2</title>
        <description>lorem ipsum</description>
        <specfields>
            <city>seattle</city>
            <startdate>2011/09/11</startdate>
        </specfields>
    </item>
</root>

http://jsfiddle.net/XnmNU/6/ - working jFiddle {edit child selectors!}

My version compares the previouse title against the current to decern if its a dupe or not, sorry i do not have time to absolutly optimise the code i am at work :(

outputs> Start Test event 1 -- oslo (2011/08/11) dallas (2011/11/11) Test event 2 -- new york (2011/09/11) seattle (2011/09/11)

$("document").ready(function(){
    var xml = "<root>     <item guid='np_108886'>         <title>Test event 1</title>         <description>lorem ipsum</description>         <specfields>             <city>oslo</city>             <startdate>2011/08/11</startdate>         </specfields>     </item>      <item guid='np_108886'>         <title>Test event 1</title>         <description>lorem ipsum</description>         <specfields>             <city>dallas</city>             <startdate>2011/11/11</startdate>         </specfields>     </item>      <item guid='np_108886'>         <title>Test event 2</title>         <description>lorem ipsum</description>         <specfields>             <city>new york</city>             <startdate>2011/09/11</startdate>         </specfields>     </item>     <item guid='np_108886'>         <title>Test event 2</title>         <description>lorem ipsum</description>         <specfields>             <city>seattle</city>             <startdate>2011/09/11</startdate>         </specfields>     </item> </root>",     xmlDoc = $.parseXML( xml ); xml = $(xmlDoc);

    try
  {
  $(xml).find('[nodeName=item]').each(function(){    if ($(this).index() != 0) {
      possitionTitle = $(this).prev();
     if ($(this).children('title').text() != possitionTitle.children('title').text() ) {
                $("div").append("</li><li>"+$(this).children('title').text()+" -- "+$(this).children("specfields").children("city").text()+" ("+$(this).children("specfields").children("startdate").text()+")");
                } else {
                    $("div").append($(this).children("specfields").children("city").text()+" ("+$(this).children("specfields").children("startdate").text()+")");
                }
        } else {
            $("div").append("Start<li>"+$(this).children('title').text()+" -- "+$(this).children("specfields").children("city").text()+" ("+$(this).children("specfields").children("startdate").text()+")");
        }
        $("div").append("</li>");

    });

  }
catch(err)
  {
  alert(err);
  }

});
<div></div>

Hope this helps. I have tested and created a js fiddle: http://jsfiddle.net/xDqZK/

Basically once you have the xml in javscript you can use jquerys parseXML() function to get it into a jquery object. Once in the object you can search for different nodes and iterate within them using the $.find() method. One tricky thing, if you want to get the value of a node you need to use .text(). I was using .val() and .hmtl() which returned undefined.

var strXml ="<root><item guid=\"np_108886\"><title>Test event 1<\/title><description>lorem ipsum<\/description><specfields><city>oslo<\/city><startdate>2011\/08\/11<\/startdate><\/specfields><\/item><item guid=\"np_108886\"><title>Test event 1<\/title><description>lorem ipsum<\/description><specfields><city>dallas<\/city><startdate>2011\/11\/11<\/startdate><\/specfields><\/item><item guid=\"np_108886\"><title>Test event 2<\/title><description>lorem ipsum<\/description><specfields><city>new york<\/city><startdate>2011\/09\/11<\/startdate><\/specfields><\/item><item guid=\"np_108886\"><title>Test event 2<\/title><description>lorem ipsum<\/description><specfields><city>seattle<\/city><startdate>2011\/09\/11<\/startdate><\/specfields><\/item><\/root>";
var xml = $.parseXML(strXml);

$("#test").html((parse(xml,"Test event 1")));

function parse(xml, strEvent)
{
    var eventStr = "",$xml = $(xml);
    $xml.find("item").each(function(){
        if($(this).find("title").text().toLowerCase() == strEvent.toLowerCase()){
           var childNode = $(this).find("specfields")
           eventStr += childNode.find("city").text();
           eventStr += " (" + childNode.find("startdate").text() + ") ";
        }
    });
    return eventStr;
}

HTML

<div id="test></div>

Something like this should work (untested):

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "YOUR XML",
    dataType: "xml",
    success: parseXml
  });
});

function parseXml(xml){
    $(xml).find("title").filter(function(){
                $(this).text() == "Test event 1";
         }).each(function(){
             $("#dataDiv").append($(this).find("city").text();
             $("#dataDiv").append("(" + $(this).find("startdate").text() + "),");
     });

     $(xml).find("title").filter(function(){
                $(this).text() == "Test event 2";
         }).each(function(){
             $("#dataDiv").append($(this).find("city").text();
             $("#dataDiv").append("(" + $(this).find("startdate").text() + "),");
     });  

}

where #dataDiv and #dataDiv2 are divs on the page with just Test event 1 or Test event 2 inside them.