CODEWITHSUNDEEP
javascriptjqueryjsonajax
Madno
Madno

Reputation: 910

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?

Upvotes: 0

Views: 464

Answers (1)

Jesper H&#248;jer
Jesper H&#248;jer

Reputation: 3192

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>

Upvotes: 1

Related Questions