Filling html table with json data in jquery

Question

i want to fill my html table with json data when the button is clicking. I wrote some jquery like this

<script>
function getData(){
    var URL_PREFIX="http://localhost:8983/solr/archiveCore/select?q=strSO:";
    var URL_MIDDLE="AND PackName:";
    var URL_SUFFIX="AND DocType:";
    var strSO="\"" + $("#ngramBoxstrSO").val() + "\"";
    var PackName="\"" + $("#ngramBoxPackName").val() + "\"";
    var DocType="\"" + $("#ngramBoxDocType").val() +"\"";
    var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;
    $.ajax({
        url:URL,
        dataType:'jsonp',
        jsonp : 'json.wrf',
        type :'get',
        cache :false,
        success: function(data){
            var docs=JSON.stringify(data.response.docs);
            var jsonData=JSON.parse(docs);
            var html='';
            $.each(jsonData,function(value,key){
                html+='<tr>';
                html+='<td>'+value.id+'</td>';
                html+='<td>'+value.strSO+'</td>';
                html+='<td>'+value.PackName+'</td>';
                html+='<td>'+value.DocType+'</td>';
                html+='<td>'+value.DocName+'</td>';
                html+='<td>'+value.FilePath+'</td>';
                html+='</tr>';
            });
            $("#tbody").append(html);
        },
    });
}

</script>

and when i run my project the table fills 'undefined' word like this. what is the wrong code? can you help me?

debug your code & show what response you are getting in success. — Tushar Walzade
– Tushar Walzade, Commented Mar 8, 2019 at 8:48

Snow · Accepted Answer · 2019-03-08 08:36:34Z

1

If you look at the docs, you'll see that the callback should be in the format:

Function( String propertyName, Object valueOfProperty )

So, your

function(value,key){

is in the wrong order - the key should be the first argument. Change to

function(key,value){

You might consider using the built-in forEach for iterating over arrays instead, there's no need to use jQuery for that:

jsonData.forEach((value) => {
  // do stuff with value
});

answered Mar 8, 2019 at 8:36

Snow

4,1463 gold badges16 silver badges43 bronze badges

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

Comments

Mustafa Berkan Demir · Accepted Answer · 2019-03-08 11:40:58Z

okey, i solve my problem but another problem is here. when i am clicking button more than once it gives me this error. i researched other subjects in web but i dont fix it.

DataTables warning: table id=example - Cannot reinitialise DataTable

function getData(){
    var URL_PREFIX="http://localhost:8983/solr/archiveCore/select?q=strSO:";
    var URL_MIDDLE="AND PackName:";
    var URL_SUFFIX="AND DocType:";
    var strSO="\"" + $("#ngramBoxstrSO").val() + "\"";
    var PackName="\"" + $("#ngramBoxPackName").val() + "\"";
    var DocType="\"" + $("#ngramBoxDocType").val() +"\"";
    var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;
    $.ajax({
        url:URL,
        dataType:'jsonp',
        jsonp : 'json.wrf',
        type :'get',
        cache :false,
        success: function(data){
            var docs=JSON.stringify(data.response.docs);
            var jsonData=JSON.parse(docs);
            var html='';

            $.each(jsonData,function(key,value){
                html+='<tr>';
                html+='<td>'+value.id+'</td>';
                html+='<td>'+value.strSO+'</td>';
                html+='<td>'+value.PackName+'</td>';
                html+='<td>'+value.DocType+'</td>';
                html+='<td>'+value.DocName+'</td>';
                html+='<td class="text-center"><button id="'+value.FilePath+""+'type="button onclick="openDocument(this.id)" class="btn btn-sm" >OPEN</td>';
                html+='</tr>';
            });
            $("#tbody").append(html);
            $(document).ready(function() {
                $('#example').dataTable({
                    /* No ordering applied by DataTables during initialisation */
                    "aaSorting" : [],
                });
            })
        },

    });

}

Collectives™ on Stack Overflow

Filling html table with json data in jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related