How to use json returned by an ajax call?

Question

This is the script I'm using to create endless pagination.

var pageNum = 1; // The latest page loaded
    var hasNextPage = true; // Indicates whether to expect another page after this one

// loadOnScroll handler
var loadOnScroll = function() {
   // If the current scroll position is past out cutoff point...
    if ($(window).scrollTop() > $(document).height() - ($(window).height()*2)) {
        // temporarily unhook the scroll event watcher so we don't call a bunch of times in a row
        $(window).unbind(); 
        // execute the load function below that will visit the JSON feed and stuff data into the HTML
        loadItems();
    }
};

var loadItems = function() {
    // If the next page doesn't exist, just quit now 
    if (hasNextPage === false) {
        return false
    }
    // Update the page number
    pageNum = pageNum + 1;
    // Configure the url we're about to hit
    var url = document.getElementsByName('page-url')[0].value
    $.ajax({
        url: url,
        data: {page_number: pageNum},
        dataType: 'json',
        success: function(data) {
            // Update global next page variable
            hasNextPage = true;//.hasNext;
            // Loop through all items
            for (i in data) {
              $.each(data, function(index, element) {
                $('.fest-content-event:last').append($('<div>', {
                  text: element.name
                }));
              });
              }
        },
        error: function(data) {
            // When I get a 400 back, fail safely
            hasNextPage = false
        },
        complete: function(data, textStatus){
            // Turn the scroll monitor back on
            $(window).bind('scroll', loadOnScroll);
        }
    });
};
        $(window).bind('scroll', loadOnScroll);

The ajax call returns json like this:

"[{\"pk\": 1, \"model\": \"f.event\", \"fields\": {\"description\": \"The authority_name is specified when one declares a Content Provider in Andr and points to the Content as an email message\\nstored by the Content Provider. Thus, a URI into a Content Provide\", \"title\": \"\", \"rank\": \"0\", \"f\": 1, \"user\": 1, \"pub_date\": \"2014-01-07T05:42:28.258Z\"}}]"

I want to append the returned json into html divs in something similar as below:

     {% for event in events %}
      <div class="f-content">
      <div class="f-content-event">
        {% if event.description %}
          {{ event.description|linebreaksbr }}
        {% endif %} 
  </div><!-- .f-content-event-->
  </div><!-- .f-content ends -->
      {% endfor %}

How can I do that?

Answer 1

Simply load this json string into dict object and render it on template.

Here is the little example..

>>> import json
>>> s = '{"foo": 6, "bar": [1, 2, 3]}'
>>> d = json.loads(s)
>>> print d
{u'foo': 6, u'bar': [1, 2, 3]}

Now you can use this dict object in your template.