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"}]}

Answer 1

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>

Answer 2

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