0

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);
1
  • 1
    It'd be helpful if you posted the generated JSON as well Jun 9, 2011 at 20:28

2 Answers 2

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.

4
  • Tried this, and got "undefined" in the proper place in the html. Jun 9, 2011 at 20:44
  • If you don't post your JSON, we're not going to be able to help Jun 9, 2011 at 20:44
  • 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. Jun 10, 2011 at 15:39
  • @Adam Nelson, thanks for that, updated the answer. Also updated it with a possible method for getting the id. Jun 10, 2011 at 22:12
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.