Using jQuery to build table rows from Ajax response (not with static json data)

Question

I have a javascript and html code of:

<script type="text/javascript" src="jquery-1.11.3.js"> </script>

<script type="text/javascript">

$(document).ready(function()
{
    $.ajax({
    url: "getjson.php", 
    type: "POST",

    success: function (response) 
    {
        console.log(response);
        var trHTML = '';

        $.each(response, function (i, item)
        {   
            trHTML += 
            '<tr><td>' + item.id + 
            '</td><td>' + item.konu + 
            '</td><td>' + item.aciklama + 
            '</td><td>' + item.giris_tarih + 
            '</td><td>' + item.degistirilme_tarih + 
            '</td><td>' + item.ad_soyad + 
            '</td><td>' + item.email + 
            '</td></tr>';            
        });
        $('#records_table').append(trHTML);
    }
});
});
</script>


<table id="records_table" border='1'>
    <tr>
        <th align="center" width="50">Id</th>
        <th align="center" width="100">Konu</th>
        <th align="center" width="100">Aciklama</th>
        <th align="center" width="100">Giris Tarih</th>
        <th align="center" width="150">Degistirilme Tarih</th>
        <th align="center" width="100">Ad Soyad</th>
        <th align="center" width="100">Email</th>
    </tr>
</table>

This code doesn't work. It only creates first row but doesn't get json response from getjson.php. When I use this with static json data in jsfiddle like this https://jsfiddle.net/tqyn3/761/, it works just as I want. But I want to get data from getjson.php. How can I convert this to dynamic?

Update: In debugger console it writes on the above:

showjson.php:12 

{"kullanicilar":[{"id":"6","konu":"blood angels","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"singuinius","email":"warhammer"},{"id":"7","konu":"emperors children","aciklama":"daemon primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"fulgrim","email":"warhammer"},{"id":"8","konu":"night lords","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"konrad curze","email":"warhammer"},{"id":"9","konu":"grey knights","aciklama":"grand master","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"grand master","email":"warhammer40k"},{"id":"10","konu":"dark angels","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"lion el jonson","email":"warhammer40k"}]}

and it writes in below with red text:

jquery-1.11.3.js:577 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in 

{"kullanicilar":[{"id":"6","konu":"blood angels","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"singuinius","email":"warhammer"},{"id":"7","konu":"emperors children","aciklama":"daemon primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"fulgrim","email":"warhammer"},{"id":"8","konu":"night lords","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"konrad curze","email":"warhammer"},{"id":"9","konu":"grey knights","aciklama":"grand master","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"grand master","email":"warhammer40k"},{"id":"10","konu":"dark angels","aciklama":"primarch","giris_tarih":"0000-00-00","degistirilme_tarih":"0000-00-00","ad_soyad":"lion el jonson","email":"warhammer40k"}]}

what is the getjson.php?perhaps getjson does not return json valid — ashkufaraz
– ashkufaraz, Commented Jun 26, 2015 at 13:36
getjson.php is another file of getting data from mysql and parsing it to json. When I call only getjsonphp, it returns data without any problem. In my jsfiddle link, its the data returned from getjson.php — gunes
– gunes, Commented Jun 26, 2015 at 13:39
Thanks for wanting to mark your question as solved. However, we don't use title hacks to do this here - instead, click the tick mark to the left of your preferred answer, to mark this as the solution. — halfer
– halfer, Commented Jun 29, 2015 at 7:06

gunes · Accepted Answer · 2015-06-29 07:05:57Z

I found the answer myself at last: Fixed code is:

$(document).ready(function()
{
    $.ajax({
        url: "getjson.php", 
        type: "POST",    
        dataType:"json",   
        success: function (response) 
        {
          var trHTML = '';
          $.each(response, function (key,value) {
             trHTML += 
                '<tr><td>' + value.id + 
                '</td><td>' + value.konu + 
                '</td><td>' + value.aciklama + 
                '</td><td>' + value.giris_tarih + 
                '</td><td>' + value.degistirilme_tarih + 
                '</td><td>' + value.ad_soyad + 
                '</td><td>' + value.email + 
                '</td></tr>';     
          });

            $('#records_table').append(trHTML);
        }   
    });
});

I should have added 'dataType: "json",' And the html is:

<table id="records_table" border='1'>
    <tr>
        <th align="center" width="50">Id</th>
        <th align="center" width="100">Konu</th>
        <th align="center" width="100">Aciklama</th>
        <th align="center" width="100">Giris Tarih</th>
        <th align="center" width="150">Degistirilme Tarih</th>
        <th align="center" width="100">Ad Soyad</th>
        <th align="center" width="100">Email</th>
    </tr>
</table>

Corey Young · Accepted Answer · 2015-06-26 14:55:47Z

1

Make sure the headers are set to JSON in your PHP. Verify that the response variable has the structure you are expecting as well. It could be an issue with the structure creation in the php. Sometimes json_encode does something different than what you expect.

to console log the repsonse put it here:

success: function(response) {
    console.log(response);
    // the rest of your code
}

try:

success: function (response) 
{
    console.log(response);
    var trHTML = '';
    var data = response.kullanicilar;
    for(var i = 0; i < data.length; i++)
    {   
        trHTML += 
        '<tr><td>' + data[i].id + 
        '</td><td>' + data[i].konu + 
        '</td><td>' + data[i].aciklama + 
        '</td><td>' + data[i].giris_tarih + 
        '</td><td>' + data[i].degistirilme_tarih + 
        '</td><td>' + data[i].ad_soyad + 
        '</td><td>' + data[i].email + 
        '</td></tr>';            
    };
    $('#records_table').append(trHTML);
}

edited Jun 26, 2015 at 14:55

answered Jun 26, 2015 at 13:37

Corey Young

5704 silver badges10 bronze badges

7 Comments

gunes Over a year ago

json structure is as I wanted. getjson.php works fine if I call it from browser. I just can't create table with dynamic json data.

Corey Young Over a year ago

what happens when you console.log(response) from getjson.php and from static. is there a difference there?

gunes Over a year ago

Afer which line should I write it? I have tried some lines but none of them returned anything.

Corey Young Over a year ago

I added it to my answer

gunes Over a year ago

Thanks. I tried that before and called the showjson.php (which is the file that I want to create table and contains the code I wrote above) but nothing happens if I'm doing right. Do I need firebug or something?

|

Collectives™ on Stack Overflow

Using jQuery to build table rows from Ajax response (not with static json data)

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related