How correctly append data to HTML from jQuery and Ajax?

Question

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:

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?

You have to copy the div or something which is you are repeating in Python. Just replace at the HTML of that with your json object values. — Sunil Pachlangia
– Sunil Pachlangia, Commented Jun 29, 2016 at 9:09
@SunilPachlangia How exactly? Unfortunately I don't know jQuery functionality well. — Madno
– Madno, Commented Jun 29, 2016 at 9:11

Jesper Højer · Accepted Answer · 2016-06-29 09:19:47Z

1

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>

answered Jun 29, 2016 at 9:19

Jesper Højer

3,2221 gold badge18 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

How correctly append data to HTML from jQuery and Ajax?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related