how receive json in jquery success method and use that json to build html content

Question

I am working on an java spring application that requires the controller to return json. By receiving that json in jquery success method, I want to make html out of it.

controller returns a json like below:

return "[{\"Id\": \"1\", \"Name\": \"Apples\"}, {\"Id\": \"2\", \"Name\":\"Mangoes\"}]";

jquery used to hit that controller and then receive the json in success method:

var content;

$(document).ready(function(){
    $("#submitButton").click(function(e){
         var formData = getFormData();
         if(formData!=false){
         $.ajax({
            type: 'POST', 
            'url': 'http://localhost:8080/Test_ReportingUI/fieldMappingNext.htm',
            data: {jsonData: JSON.stringify(formData)},
            dataType: 'json',
            success: function(response){
                   for (var x = 0; x < response.length; x++) {
                     content = response[x].Id;
                     content += "<br>";
                     content += response[x].Name;
                     content += "<br>";
                     $(content).appendTo("#Fruits");
                 } 
            },
            timeout: 10000,
            error: function(xhr, status, err){ 
                if(response.status=='timeout')
                {   
                    alert('Request time has been out','');
                }
                console.log(status,err); 
            }
        }); }
     });
});

below is the HTML div where I want to use above content to append:

<div id="Fruits">
fruits : 
</div>

it is reaching to the controller. and also returning json. but I am not able to use that json.

When I put alert(response) at the very first line of success method, it shows : [object,object],[object,object] — JPG
– JPG, Commented Mar 1, 2016 at 6:27
that is fine, can you check your browser's console to see if there are any errors? — gurvinder372
– gurvinder372, Commented Mar 1, 2016 at 6:28
ok. It is showing this : Uncaught Error: Syntax error, unrecognized expression: 1<br>Apples<br> — JPG
– JPG, Commented Mar 1, 2016 at 6:30
Your problem might be that jquery is expecting a html element wrapped in an element tag you're just giving it text. Try wrapping it all in a div and see if that fixes it. Or a span if you prefer. So have $("<span>"+content+"</span>") instead — Binvention
– Binvention, Commented Mar 1, 2016 at 6:37

gurvinder372 · Accepted Answer · 2016-03-01 06:33:57Z

1

Replace your for loop with

       for (var x = 0; x < response.length; x++) 
       {                    
            content = "<div class='fruit'><div>" + response[x].Id + "</div>";
            content += "<div>" + response[x].Name + "</div></div>";
            $(content).appendTo("#Fruits");
       }

Your error message correctly explained that you were not appending the correct expression into the fruits

answered Mar 1, 2016 at 6:33

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

Comments

Rajesh Dixit · Accepted Answer · 2016-03-01 06:37:20Z

try below code

$(document).ready(function() {
  $("#submitButton").click(function(e) {
    var formData = getFormData();
    if (formData != false) {
      $.ajax({
        type: 'POST',
        'url': 'http://localhost:8080/Test_ReportingUI/fieldMappingNext.htm',
        data: {
          jsonData: JSON.stringify(formData)
        },
        dataType: 'json',
        success: function(response) {
          for (var x = 0; x < response.length; x++) {
            var fContent = $("<div></div>");
            var id = $("<span></span>").text(response[x].Id);
            var name = $("<span></span>").text(response[x].Name);
            fContent.append(id)
            fContent.append(name);
            $("#Fruits").append(fContent);

          }
        },
        timeout: 10000,
        error: function(xhr, status, err) {
          if (response.status == 'timeout') {
            alert('Request time has been out', '');
          }
          console.log(status, err);
        }
      });
    }
  });
});

Collectives™ on Stack Overflow

how receive json in jquery success method and use that json to build html content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related