Why always getting last row from json array result when iterate through with Jquery

Question

I have json data in this structure

here is my json code https://jsonblob.com/309e8861-7f26-11e7-9e0d-cf3972f3635e

and here is my jquery code example

$("#getJsonData").click(function(){
    $.get(base_url + 'roles/index', function(data) {
        var data = $.parseJSON(data);
        $.each(data, function(index, val) {
            $("#result").html("<p>" + val.name + "</p>");
        });
    });
});

HTML file

<button id="getJsonData">Load role list</button>

    <div id="result"></div>

I don't get this, I get every value from json in console when do console.log, but when use html method to display result as html in screen it just showing last value from ending last json array. What is wrong here?

KARAN LAGALWAR · Accepted Answer · 2017-08-12 07:05:23Z

2

jquery .html always overrite previous html so we cant use html in loop section instead of that we can use append it simply append your p tag in result div Instead of using this:-

$("#result").html("<p>" + val.name + "</p>");

use like this:-

$("#result").append("<p>" + val.name + "</p>");

answered Aug 12, 2017 at 7:05

KARAN LAGALWAR

2271 silver badge9 bronze badges

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

2 Comments

gox Over a year ago

But it will append same data result over and over clicking the button, is it right way even?

KARAN LAGALWAR Over a year ago

can you post your present output in screenshot?

Prasanna Venkatesh · Accepted Answer · 2017-08-12 08:08:34Z

0

You are overwriting the html with the code

$("#result").html("<p>" + val.name + "</p>");

Instead you can store the result in variable and then you write it to the element.Like this

$("#getJsonData").click(function(){
  $.get(base_url + 'roles/index', function(data) {
    var data = $.parseJSON(data);
    var html = '';
    $.each(data, function(index, val) {
        html +="<p>" + val.name + "</p>";
    });        
    $("#result").html(html);
  });
});

answered Aug 12, 2017 at 8:08

Prasanna Venkatesh

4164 silver badges16 bronze badges

Comments

Sabin · Accepted Answer · 2017-08-12 11:20:17Z

0

Your code should be :

$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
    var data = $.parseJSON(data);
    var listHtml="";
    $.each(data, function(index, val) {
       listHtml=listHtml+ "<p>" + val.name + "</p>";
    });
   $("#result").html(listHtml);
});

});

And Html should be same as your

<button id="getJsonData">Load role list</button>

<div id="result"></div>

Working example is here

answered Aug 12, 2017 at 11:20

Sabin

311 silver badge3 bronze badges

Collectives™ on Stack Overflow

Why always getting last row from json array result when iterate through with Jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related