title: How to dynamically generate html list from json array received via ajax call?
body: <p>I am a Django novice attempting to build an app that allows users to add tracks to a playlist.
  I use sessions to generate a list of track id strings in a view and return an http response with the serialized array. The problem is that trying to iterate through the array in the template to build an ordered list does not format properly. It displays as a python list instead of the expected bulleted html list. </p>
  
  <p>Any help would be greatly appreciated! </p>
  
  <p>the Div</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;div id="playlist"&gt;
  &lt;ol&gt;
  {% for track in playlist %}
      &lt;li&gt;{{track}}&lt;/li&gt;
  {% endfor %}
  &lt;/ol&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the javascript
      </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).on('submit', '.track_form', function() {
          var $form = $(this);
              $.ajax({
                  url: $form.attr('action'),
                  data: $form.serialize(),
                  type: $form.attr('method'),
                  success: function (data) {
  
                      $("#playlist").html(data);
                  },
                  error: function(data) {
                      console.log('There was a problem');
                  }
               });
               return false;    
           });
  &lt;/script&gt;
  </code></pre>
  
  <p>the view</p>
  
  <pre><code>def artistpage(request):
      if request.method == 'POST':
          session_playlist = request.session.get('session_playlist', [])
          tname = str(request.POST.get('track_name'))
          session_playlist.append(tname)
          request.session['session_playlist'] = session_playlist
  
          return HttpResponse(json.dumps(session_playlist))
  </code></pre>