Question

I have an XML file with data and would like to place the items that has the same date inside for example a DIV tag.

What I want is to categorize the editions by date and bundle all items / edition that has the same date value.

Is this possible?

XML code:

<edition>
    <id>116853</id>
    <name>First Round - Summervibes Edition</name>
    <date>08-06-2012</date>
    <time>19:30</time>
    <location>
        Prins Alexanderlaan 37, Rotterdam, The Netherlands
    </location>
    <venue url="http://www.betribes.com/venues/club-eclipse" id="24079">Club Eclipse</venue>
    <lineup>Kleine Viezerik, Kid Kaio, DJ Goine</lineup>
    <entrance_fee>€11,–</entrance_fee>
    <music>Club House, House, R&B</music>
    <hot_party>false</hot_party>
    <website_link>http://club-eclipse.nl</website_link>
    <clubjudge_link depricated="true">
        http://www.betribes.com/editions/first-round-summervibes-edition
    </clubjudge_link>
    <edition_link>
        http://www.betribes.com/editions/first-round-summervibes-edition
    </edition_link>
    <image_flyer_front>
        http://s3-eu-west-1.amazonaws.com/btrb-prd-flyers/ye29ys93be98.jpg
    </image_flyer_front>
    <image_120x120>
        http://s3-eu-west-1.amazonaws.com/btrb-prd-flyers/ye29ys93be98-a_thumbnail-120x120.jpg
    </image_120x120>
    <excerpt/>
    <tickets>
        <ticket>
            <price>11.0</price>
            <name>Ticketscript</name>
            <url>
                https://shop.ticketscript.com/channel/web2/start-order/rid/DFEG5RE7/language/nl
            </url>
        </ticket>
    </tickets>
</edition>

Answer 1

See my comment above. If I’ve interpreted what you’re trying to do correctly, I think it’s a question of parsing your XML. This answer would help you with how to do that: XML parsing of a variable string in JavaScript.

Having parsed it, you’ll need to create a function that can loop through an array of edition elements looking for those whose date attribute is the one you specify then emit the values of the attributes you want into, for example, cells of a table row.

Suggested re-write of your question

I edited your question but I have to await peer feedback before anyone can see it. Here’s how I would write it:

I have an XML document with multiple copies of an element called edition. I would like to parse the document into a format that JavaScript can understand then loop through all the edition elements and group them by date.

How would you do that?

Here is a sample edition element (with only a few sample attributes. The real data is more complex):

<edition>
    <id>116853</id>
    <name>First Round - Summervibes Edition</name>
    <date>08-06-2012</date>
</edition>

Link to existing answer

Having edited your question, it becomes much more readable. The problem is you might still get downvoted because there is already a very good question, which I think really is the same as your question, and there are lots of excellent answers at XML parsing of a variable string in JavaScript.

Anyway, here’s some code that gives the general shape based on the advice in the question I’ve linked to above, taking it one step further to show how you might loop through the collection of editions.

In the body, put a div element to display your data:

<div id="display"></div>

Then below that put a script element with code like this:

var xmlData = "<editions><edition><id>111</id><name>First</name><date>08-06-2012</date></edition>" +
    "<edition><id>222</id><name>Second</name><date>06-04-2012</date></edition>" +
    "<edition><id>333</id><name>Third</name><date>08-06-2012</date></edition>" +
    "<edition><id>333</id><name>Fourth</name><date>06-04-2012</date></edition></editions>",
    parseXml, xml, editions, display, i, edition, nameElement, name;
if (typeof window.DOMParser != "undefined") {
    parseXml = function(xmlStr) {
        return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
    };
} else if (typeof window.ActiveXObject != "undefined" &&
    new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXml = function(xmlStr) {
        var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(xmlStr);
        return xmlDoc;
    };
} else {
    throw new Error("No XML parser found");
}
xml = parseXml(xmlData);
editions = xml.getElementsByTagName("edition");

display = document.getElementById("display");
for(var i = 0; i < editions.length; i++){
    edition = editions.item(i);
    nameElement = edition.getElementsByTagName("name");
    name = nameElement[0].childNodes[0];
    div = document.createElement("div");
    div.innerHTML = name.nodeValue;
    display.appendChild(div);
}

2. Next step

I hope you can go from there to achieve the grouping you want. You would have to loop through all editions and build an associative array of groups perhaps using date as the key. As you hit a new edition, you would

1. retrieve the date
2. attempt to find a group with that date and add the edition to the array of editions for that group.
3. if the group doesn’t exist, create a new group with the date as the key and add the edition to the array of editions in that group.
4. finally go through the group object and display each group in a new div and the editions in, say a ul element

There’s probably some clever way to optimise this process so that you display items as you go, but I’ve seen on the YUI library blogs that painting elements is time-consuming, so it might be best to build one big HTML string of all these div and ul and li elements and then paint at the end. The JavaScript processing tends to be super fast compared to painting new elements into the DOM.

3. Final bits of advice

1. I think it’s important to provide only relevant code. Your example is very long and full of irrelevant details.
2. Personally, I find parsing XML and attempting to navigate through the resulting XML document pure misery. If you have a choice, have a look at JSON. For most uses, JSON is probably better than XML. It is a subset of JavaScript, so it is already in a format that JavaScript can understand (though a parser is often still necessary).