Adding JSON data to table in AJAX

Question

Ok i have some search results from input box. I used keyup to get results. Then tis results send to AJAX, and i want to append it to table. My problem is because i use append i will get more than one table headers if i have more results, on the other side i cant use html() because script use for loop so i will only get one result. Can someone help me to solve this problem. I try something like this...

$("#search").keyup(function () 
    {
       var value = $(this).val(); // varijabla iz input polja
       // provera za minimalnu duzinu pretrage
       if(value.length > 3)
       {
            $.ajax({
                type: "POST",
                url: "crud/searching/",
                data: { 'var' : value },
                dataType: "json",
                success: function(response)
                {    alert(response);  
                    $('#warning').html(response.msg);;
                    $('#result').html('');

                    for(var i=0; i<response.result.length; i++)  //petlja za pristup json
                    {
                        $('#result').append('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody><tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr> </tbody></table> ' );//dodavanje rezultata u div

                    }                                                     
                } 
            })
        }
    });

Create the table once, and subsequently append not to #result but to your new table. — David Hedlund
– David Hedlund, Commented Oct 3, 2014 at 8:49

Arun P Johny · Accepted Answer · 2014-10-03 15:11:43Z

1

Just create the table once and then append trs in the loop to its tbody

$('#warning').html(response.msg);
if (response.result.length) {
    var $table = $('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody></tbody></table>').appendTo($('#result').html(''));
    var $tbody = $table.find('tbody');

    for (var i = 0; i < response.result.length; i++) //petlja za pristup json
    {
        $tbody.append('<tr><td>' + response.result[i].id + '</td><td>' + response.result[i].naslov + '</td><td>' + response.result[i].autor + '</td><td>' + response.result[i].cena + '</td><td>' + response.result[i].valuta + '</td></tr>  '); //dodavanje rezultata u div
    }
} else {
    $('#result').html('')
}

edited Oct 3, 2014 at 15:11

answered Oct 3, 2014 at 8:53

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

Vladimir Štus Over a year ago

Thank you sir, works great. You help me agian! Manny manny thanks, could you take a look at this issue stackoverflow.com/questions/26142101/…

laruiss Over a year ago

I wouldn't recommend to use jQuery's .append() in a loop ;-)

Vladimir Štus Over a year ago

sorry but i find unwanted behavior in my code thing is if, i dont have any results table header stays.

laruiss · Accepted Answer · 2014-10-03 09:02:18Z

0

Try this :

$("#search").keyup(function () 
  {
     var value = $(this).val(); // varijabla iz input polja
     // provera za minimalnu duzinu pretrage
     if(value.length > 3)
     {
      $.ajax({
        type: "POST",
        url: "crud/searching/",
        data: { 'var' : value },
        dataType: "json",
        success: function(response)
        {  alert(response);  
          $('#warning').html(response.msg);
          // Store jQuery objects if used more than once
          var $table = $('<table class="page-list">').appendTo($('#result')),
            $thead = $('<thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead>').appendTo($table),
            $tbody = $('<tbody>').appendTo($table);
            innerHTML  = '';

          for(var i=0; i<response.result.length; i++)  //petlja za pristup json
          {
            innerHTML += '<tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr>' );//dodavanje rezultata u div

          }
          // Append to HTML only once, when you have the full HTML to append
          $tbody.append(innerHTML);
        } 
      })
    }
  });

answered Oct 3, 2014 at 9:02

laruiss

3,8161 gold badge21 silver badges29 bronze badges

1 Comment

Vladimir Štus Over a year ago

yes thank you mr Arun solve my problem, its similar to your code, so yours is correct to

Collectives™ on Stack Overflow

Adding JSON data to table in AJAX

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related