CODEWITHSUNDEEP
javascriptphpjqueryjson
Vladimir Štus
Vladimir Štus

Reputation: 217

Adding JSON data to table in AJAX

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

                    }                                                     
                } 
            })
        }
    });

Upvotes: 0

Views: 1144

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

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('')
}

Upvotes: 1

laruiss
laruiss

Reputation: 3816

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);
        } 
      })
    }
  });

Upvotes: 0

Related Questions