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

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

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

Share Improve this question edited Jun 29, 2015 at 7:07 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Jun 26, 2015 at 13:31 gunes 1311 gold badge1 silver badge14 bronze badges

check what is returned by server (console.log(response)) – Daimos Commented Jun 26, 2015 at 13:36
what is the getjson.php?perhaps getjson does not return json valid – 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 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 Commented Jun 29, 2015 at 7:06

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

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>

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

2 Answers 2

与本文相关的文章

评论列表(0)