jQuery nested XML elements

Question

I have an XML file that looks like this

<posts>
<post>
    <username>MarchHare</username>
    <date><day>4</day><month>May</month><year>2013</year></date>
    <time><hour>18</hour><minute>0</minute><seconds>8</seconds></time>
    <text>Have some wine.</text>
    <post>
        <username>Alice</username>
        <date><day>4</day><month>May</month><year>2013</year></date>
        <time><hour>18</hour><minute>0</minute><seconds>19</seconds></time>
        <text>I don't see any wine.</text>
        <post>
            <username>MarchHare</username>
            <date><day>4</day><month>May</month><year>2013</year></date>
            <time><hour>18</hour><minute>0</minute><seconds>28</seconds></time>
            <text>There isn't any.</text>
            <post>
                <username>Alice</username>
                <date><day>4</day><month>May</month><year>2013</year></date>
                <time><hour>18</hour><minute>0</minute><seconds>51</seconds></time>
                <text>Then it wasn't very civil of you to offer it.</text>
                <post>
                    <username>MarchHare</username>
                    <date><day>4</day><month>May</month><year>2013</year></date>
                    <time><hour>18</hour><minute>1</minute><seconds>23</seconds></time>
                    <text>It wasn't very civil of you to sit down without being invited.</text>
                    <post>
                        <username>Alice</username>
                        <date><day>4</day><month>May</month><year>2013</year></date>
                        <time><hour>18</hour><minute>2</minute><seconds>3</seconds></time>
                        <text>I didn't know it was /your/ table, it's laid for a great many more than three.</text>
                    </post>
                </post>
            </post>
        </post>
    </post>
</post>
</posts>

which I am trying to read through with jQuery. Currently I'm using this piece of js

 target.append("<div class='postList'>");
    $(data).find("post").each(function () {
        $(target).append("<div class='postHeader'>");
        $(".postHeader").append("<p class='user'>"+$(this).find("username").text()+"</p>");
        $(".postHeader").append("<p class='date'>"+$(this).find("day").text()+"/"+$(this).find("month").text()+"/"+$(this).find("year").text()+"</p>");
        $(".postHeader").append("<p class='time'>"+$(this).find("hour").text()+":"+$(this).find("minute").text()+":"+$(this).find("seconds").text()+"</p>");
        $(".postHeader").append("</div>");
        $(".postHeader").append("<div class='post'>");
        $(".post").append("<p>"+$(this).find("text").text())+"</p>";
        $(".post").append("</div>");
    });
$(target).append("</div>");

which doesn't seem to like the idea of nested elements and returns a very jumbled discussion.

Any clues on how to make this display nicely? (i.e not jumbled up)

EDIT: the XML cannot be changed. The nesting exists to show which posts are replies and which are not

Musa · Accepted Answer · 2013-08-21 23:45:43Z

Your XML structure isn't very logical, posts shouldn't be nested like that. consider changing it to

<posts>
    <post>
        <username></username>
        <date><day></day><month></month><year></year></date>
        <time><hour></hour><minute></minute><seconds></seconds></time>
        <text></text>
    </post>
    <post>
        <username></username>
        <date><day></day><month></month><year></year></date>
        <time><hour></hour><minute></minute><seconds></seconds></time>
        <text></text>
    </post>
</posts>

Now for your lines of code like target.append("</div>");, you cannot add elements in parts to the dom.
In fact the lines with the start tag (e.g.$(target).append("<div class='postHeader'>");) are the only necessary, the appending of the closing tag does nothing.

Now with the proposed XML you can use the following to parse it

target.append("<div class='postList'>");
$(data).find("post").each(function () {
    var postHeader = $("<div class='postHeader'>").appendTo(target);
    postHeader.append("<p class='user'>"+$(this).find("username").text()+"</p>")
              .append("<p class='date'>"+$(this).find("day").text()+"/"+$(this).find("month").text()+"/"+$(this).find("year").text()+"</p>")
              .append("<p class='time'>"+$(this).find("hour").text()+":"+$(this).find("minute").text()+":"+$(this).find("seconds").text()+"</p>");
    var post = $("<div class='post'>").appendTo(postHeader);
    post.append("<p>"+$(this).find("text").text())+"</p>");
});

For the current XML you can use

target.append("<div class='postList'>");
$(data).find("post").each(function () {
    var postHeader = $("<div class='postHeader'>").appendTo(target);
    postHeader.append("<p class='user'>"+$(this).children("username").text()+"</p>")
              .append("<p class='date'>"+$(this).find("> date day").text()+"/"+$(this).find("> date month").text()+"/"+$(this).find("> date year").text()+"</p>")
              .append("<p class='time'>"+$(this).find("> time hour").text()+":"+$(this).children("> time minute").text()+":"+$(this).find("> time seconds").text()+"</p>");
    var post = $("<div class='post'>").appendTo(postHeader);
    post.append("<p>"+$(this).children("text").text())+"</p>");
});

I probably should mention that the XML is frozen and not editable. The nesting exists to show which threads are replies and which are not.

Collectives™ on Stack Overflow

jQuery nested XML elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related