Properly parse through JSON from an XML file with jQuery

Question

I'm reading an xml file with PHP and pulling it into jQuery via a .getJSON call, but I can't figure out how to iterate over it. I have the following XML:

<comments>
    <comment id='0'>
        <author>John Doe</author>
        <datetime>2011-06-05T11:13:00</datetime>
        <text>Message text</text>
    </comment>
    <comment id='1'>
        <author>John Doe</author>
        <datetime>2011-06-05T11:13:00</datetime>
        <text>Message text</text>
    </comment>
</comment>

I'm reading and sending it to the front end with PHP like this:

$xml = simplexml_load_file("comments.xml");
print json_encode($xml);

The JSON it produces is:

{ "comment" : [ 
      { "@attributes" : { "id" : "0" },
        "author" : "John Doe",
        "datetime" : "2011-06-05T11:13:00",
        "text" : "Message text"
      },
      { "@attributes" : { "id" : "1" },
        "author" : "John Doe",
        "datetime" : "2011-06-05T11:13:00",
        "text" : "Message text"
      }
] }

...and trying to figure out how to manipulate it in jQuery without much success. I've been reading tutorials and this site for hours, but no luck. How would I access the data? Here's the jQuery:

$.getJSON('xml.php',function(data) {
    html = '<div class="comments">';
    for (var i=0;i<data.comments;i++){
        var obj = data.comments.comment[i];
        html += '<div class="comment">\n';
        html += '   <span class="name">'+obj.author+'</span>\n';
        html += '</div>';
    }
    html += '</comments>';
    $('.comments').replaceWith(html);
});

The idea being to produce the following html:

<div class="comments">

    <div class="comment first">
        <span class="name">Jon Doe</span>
        <span class="text">Message Text</span>
        <div class="meta">6 minutes ago</div>
    </div>
    <div class="comment">
        <span class="name">John Doe</span>
        <span class="text">I hate blue. Can you get add more pink?</span>
        <div class="meta">2 hours ago</div>
    </div>

</div>

UPDATE Here's the final jQuery I put together based on the answers:

html = '<div class="comments">';
$.each(data.comment, function(key, comment) {
    html += '    <div class="comment">\n';
    html += '        <span class="name">'+comment.author+'</span>\n';
    html += '        <span class="text">'+comment.text+'</span>\n';
    html += '        <div class="meta">\n'+comment.datetime+'</div>\n';
    html += '    </div>';
});
html += '</div>';
$('.comments').replaceWith(html);

It'd be helpful if you posted the generated JSON as well

Michael Robinson
– Michael Robinson

2011-06-09 20:28:40 +00:00
Commented Jun 9, 2011 at 20:28 — Michael Robinson
– Michael Robinson, Commented Jun 9, 2011 at 20:28

Michael Robinson · Accepted Answer · 2011-06-10 22:11:26Z

1

Without knowing what errors you're getting:

$.getJSON('xml.php',function(data) {
    html = '<div class="comments">';
    $.each(data.comment, function(key, comment) {
        var comment_id = comment['@attributes'].id;
        html += '<div class="comment">\n';
        html += '   <span class="name">'+comment.author+'</span>\n';
        html += '</div>';

    });
    html += '</div>';
    $('.comments').replaceWith(html);
});

An example.

edited Jun 10, 2011 at 22:11

answered Jun 9, 2011 at 20:28

Michael Robinson

29.6k12 gold badges109 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adam Nelson Over a year ago

Tried this, and got "undefined" in the proper place in the html.

Michael Robinson Over a year ago

If you don't post your JSON, we're not going to be able to help

Adam Nelson Over a year ago

Perfect! How would I access the attributes? The ID attribute, for example? I tried comment[0], comment['id'] with no luck. Also tried changing out the 'data.comment' line to just 'data' and then using comment.comment.author, etc for the other values to try to traverse up one level in the tree but that didn't work at all.

Michael Robinson Over a year ago

@Adam Nelson, thanks for that, updated the answer. Also updated it with a possible method for getting the id.

Butifarra · Accepted Answer · 2011-06-09 20:44:39Z

0

I am not sure what tutorials you've read, but take a look at this one for the jQuery Template Markup Language (JTML).

answered Jun 9, 2011 at 20:44

Butifarra

1,1128 silver badges12 bronze badges

Collectives™ on Stack Overflow

Properly parse through JSON from an XML file with jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related