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 :)