CODEWITHSUNDEEP
javascriptjquery
shaytac
shaytac

Reputation: 4024

Jquery .each loop enclosure

This script basically serializes a form and do get request on an api and retrieves json response. Received response can be modified by adding additional parameters via said form and serialized and is send to api and so forth. Right now every time i press submit only the last element shows up on the screen. I tried append functionality but it creates duplicate of the same set items instead of refreshing the items on the page. I believe it is a enclosure issue that may be trivial but i am not well versed in jquery and java script in general.

<script>
$(document).ready(function() {
  var APISOURCE = '../api/software/?format=json'
  $('#filterform').on('submit',function(e){
    e.preventDefault();
    var query = $('#filterform').serialize();
    console.log(query);
        $.ajax({
                datatype: 'json',
                url: APISOURCE,
                query: query,
                success: function(data){
                    console.log(data.results[0]);
                    $.each(data.results, function(i,results){
                        content = '<p>' + results.developer + '</p>';
                        content += '<br/>';
                        //$(content).empty("#softwarelist").appendTo("#softwarelist");
                        $("#softwarelist").html(content);
                      });


                }/* response processing function ends */
            });/* ajax function ends */

  });
});
</script>

Upvotes: 0

Views: 150

Answers (3)

varun kumar
varun kumar

Reputation: 115

make the content as array and push the elements into that array to add all the values and later display that array

Upvotes: 0

Thanh Kh&#225;nh
Thanh Kh&#225;nh

Reputation: 641

You should edit code as below:

  $("#softwarelist").html(''); //remove old html first
  $.each(data.results, function(i,results){
                    content = '<p>' + results.developer + '</p>';
                    content += '<br/>';
                    //$(content).empty("#softwarelist").appendTo("#softwarelist");
                    $("#softwarelist").append(content); //append new content
  });

Upvotes: 1

scrowler
scrowler

Reputation: 24405

Try building a string by concatenating each result as you go and setting it to your div at the end of your loop:

Also, content will be undefined - I'll presume you mean results.content as returned from your AJAX return.

var content;
$.each(data.results, function(i,results){
    content += '<p>' + results.developer + '</p><br>' + results.content;
});
$('#softwarelist').html(content);

Upvotes: 2

Related Questions