-1

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>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Jayron_NL
  • 5
  • 1
  • Do you mean you have an XML file with multiple instances of edition elements and you want to parse the file using javascript, make an array of those whose date attribute is the same as a date you specify, then display these in, say, a table within a div? – DavidHyogo Jun 09 '12 at 15:43
  • Yes!! that is excatly what i want, hope you can help me out with this. there are multiple edition and i want to loop through the editions and categorize it by date within a div or table. – Jayron_NL Jun 11 '12 at 08:27
  • First, let me clean up the English in your question and you might get more support from the community. I'm an English teacher with engineering students so I'm used to guessing what a technical person is trying to say. – DavidHyogo Jun 11 '12 at 10:37
  • haha sorry for my bad english XD, and I am new to stackoverflow but I find it very helpful and kind for all the feedback ;) – Jayron_NL Jun 11 '12 at 11:35
  • I have edited your question but there's a message saying only I can see my edits. It needs to be peer reviewed. I don't know if you could accept my edits? – DavidHyogo Jun 11 '12 at 11:41
  • To the person who downvoted Jayron: I get it. He's not a native speaker so his English is a bit ropey. The question is very close to one that was asked before so maybe he didn't do enough research. But look at his reputation. He's obviously new and may benefit from some encouragement. I think it's important to explain a downvote. – DavidHyogo Jun 11 '12 at 13:23

1 Answers1

0

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).
Community
  • 1
  • 1
DavidHyogo
  • 2,838
  • 4
  • 31
  • 48
  • Ok i have converted the xml to Json with a callback function. I saw a simular question but it was with jQuery. http://stackoverflow.com/questions/6467918/jquery-parse-xml-and-group-by-element-value Demo: http://jsfiddle.net/XnmNU/6/ As you can see here : the XML is grouped by the value of the title. – Jayron_NL Jun 11 '12 at 15:04
  • You're well on your way so any chance of accepting my answer? – DavidHyogo Jun 11 '12 at 15:37
  • accepted ;) sorry for a messy question. I will do more research with my future questions ;) thank you very much with your help user341180 – Jayron_NL Jun 12 '12 at 07:15