Getting All The Data In An Xml Via Javascript

Trying to spool out all the post and also all the comment for each post from the DB using ajax/javascript. I'm getting the actual data from the DB via ajax correctly but having iss

Solution 1:

I think you might want to change your XML structure to something like this ..

<posts>
    <post>
        <author>
            <name>John Doe</name>
            <acctype>Admin</acctype>
        </author>
        <time>09/07/2013</time>
        <msg>This is a message</msg>
        <img>
            <url>post_img.jpg</url>
        </img>
        <comments>
            <comment>
                <author>
                    <name>John Smith</name>
                    <acctype>basic</acctype>
                </author>
                <time>09/07/2013</time>
                <content>comment number 1</content>
            </comment>
            <comment>
                <author>
                    <name>Jane Doe</name>
                    <acctype>basic</acctype>
                </author>
                <time>09/07/2013</time>
                <content>comment number 1</content>
            </comment>
        </comments>
    </post>
    <post>
       ......
    <post>
</posts>

And then you can have your JavaScript as follows ...

var post_holder_div = document.getElementById('status_update_msg_area');
post_holder_div.innerHTML = '';

var posts = xmlDom.getElementsByTagName("post"), domString = '';
for (var i = 0; i < posts.length; i++) {
    var poster = posts[i].getElementsByTagName('author')[0].childNodes[0].textContent,
        message = posts[i].getElementsByTagName('msg')[0].textContent,
        time = posts[i].getElementsByTagName('time')[0].textContent,
        comments = posts[i].getElementsByTagName('comments')[0].childNodes;

    domString += '<p><strong>Poster name:</strong> ' + poster + '</p>';
    domString += '<p><strong>Post:</strong> ' + message + '</p>';

    if (comments.length) {

        domString += '<h4>Comments</h4>';

        for (var j = 0; j < comments.length; j++) {
            var commenter = comments[j].getElementsByTagName('author')[0].childNodes[0].textContent,
                comment = comments[j].getElementsByTagName('content')[0].textContent;

            domString += '<p>' + commenter + ': <em>' + comment + '</em></p>';

        }
    }

}

post_holder_div.innerHTML = domString;

This should give you a rough idea. With the comments you want to have them nested i.e. <comment/> as a subchild of <comments/>. is to as is to

NB: Of course the JS code could be refactored and be neater but this is just help you on your way.

I hope this helps :)