MHS MHS - 5 months ago 9
jQuery Question

How correctly append data to HTML from jQuery and Ajax?

I am working on implementing a "load more articles" functionality using Python, Flask and Ajax. Everything is working from the server-side but I don't know how to append the new data to the HTML by using jQuery.

I have the following json object which is sent from the server side:
enter image description here

And the following jQuery and Ajax code in my HTML template:

<script type=text/javascript>
$(function() {
$('a#get-more').bind('click', function() {
$.getJSON($SCRIPT_ROOT + '/_get_the_data_from_serverside', {
}, function(data) {
$("#more").append(data.stories[0].storycontent);
});
return false;
});
});
</script>
<span id=more></span>
<a href="#" id=get-more></a>


But it doesn't work as you can see, the data from the json object like "storycontent" is not being appended to the HTML.

Any ideas?

Answer

The path for the json should be data[0].storycontent. Like so:

<script type=text/javascript>
  $(function() {
    $('a#get-more').bind('click', function() {
      $.getJSON($SCRIPT_ROOT + '/_get_the_data_from_serverside', {
      }, function(data) {
        $("#more").append(data[0].storycontent);
      });
      return false;
    });
  });
</script>
<span id="more"></span>
<a href="#" id=get-more></a>