title: Trying to display ajax response in html
body: <p>I am trying to display some ajax response that i receive from a controller each time i scroll at the bottom of the page.</p>
  
  <pre><code>if($(window).scrollTop() == $(document).height() - $(window).height()){
      load++;
  
      $.ajax({
              type: 'POST',
              url: 'get-response',
              dataType: 'json',
              data: {
                  "load" : load,
                  "key" : key
              },
              success: function(response){
                  var out = "";
                  var i;
                  for(i=0;i&lt;response.length;i++){
                      out += response[i];
                  }
                  document.getElementById("response").innerHTML = out;
  
              }
          });
  }
  </code></pre>
  
  <p>The response i get is in JSON format and looks like this :
  <img src="https://i.stack.imgur.com/mSYGH.png" alt="enter image description here"></p>
  
  <p>I am not sure how to traverse the result and display it in html appending each time the results are returned. Can anyone help me with what else i can write in this section to get the results displayed ? </p>
  
  <pre><code>success: function(response){
                  var out = "";
                  var i;
                  for(i=0;i&lt;response.length;i++){
                      out += response[i];
                  }
                  document.getElementById("response").innerHTML = out;
  
              }
  </code></pre>