Display JSON Data in HTML Table

Question

I get the following JSON String from server as response      city   AMBALA   cStatus   Y     city   ASANKHURD   cStatus   Y     city   ASSANDH   cStatus   Y      Here is my Jquery Code      search   click function         alert  submit handler has fired          ajax           type   POST           url   cityResults htm           data      cityDetails   serialize            success  function data                alert data                          error  function jqXHR  textStatus  errorThrown               alert  error      textStatus          errorThrown                         return false   suppress natural form submission       The alert shows the JSON String Correctly  Now i want to map this response to my table  say     How can i do that

User · Answer

I created the following function to generate an html table from an arbitrary JSON object:

function toTable(json, colKeyClassMap, rowKeyClassMap){
    let tab;
    if(typeof colKeyClassMap === 'undefined'){
        colKeyClassMap = {};
    }
    if(typeof rowKeyClassMap === 'undefined'){
        rowKeyClassMap = {};
    }

    const newTable = '<table class="table table-bordered table-condensed table-striped" />';
    if($.isArray(json)){
        if(json.length === 0){
            return '[]'
        } else {
            const first = json[0];
            if($.isPlainObject(first)){
                tab = $(newTable);
                const row = $('<tr />');
                tab.append(row);
                $.each( first, function( key, value ) {
                    row.append($('<th />').addClass(colKeyClassMap[key]).text(key))
                });

                $.each( json, function( key, value ) {
                    const row = $('<tr />');
                    $.each( value, function( key, value ) {
                        row.append($('<td />').addClass(colKeyClassMap[key]).html(toTable(value, colKeyClassMap, rowKeyClassMap)))
                    });
                    tab.append(row);
                });

                return tab;
            } else if ($.isArray(first)) {
                tab = $(newTable);

                $.each( json, function( key, value ) {
                    const tr = $('<tr />');
                    const td = $('<td />');
                    tr.append(td);
                    $.each( value, function( key, value ) {
                        td.append(toTable(value, colKeyClassMap, rowKeyClassMap));
                    });
                    tab.append(tr);
                });

                return tab;
            } else {
                return json.join(", ");
            }
        }

    } else if($.isPlainObject(json)){
        tab = $(newTable);
        $.each( json, function( key, value ) {
            tab.append(
                $('<tr />')
                    .append($('<th style="width: 20%;"/>').addClass(rowKeyClassMap[key]).text(key))
                    .append($('<td />').addClass(rowKeyClassMap[key]).html(toTable(value, colKeyClassMap, rowKeyClassMap))));
        });
        return tab;
    } else if (typeof json === 'string') {
        if(json.slice(0, 4) === 'http'){
            return '<a target="_blank" href="'+json+'">'+json+'</a>';
        }
        return json;
    } else {
        return ''+json;
    }
};

So you can simply call:

$('#mydiv').html(toTable([{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]));

User · Answer

Try this      lt  DOCTYPE html gt       lt html gt       lt head gt           lt title gt Convert JSON Data to HTML Table lt  title gt           lt style gt              th  td  p  input                   font 14px Verdana                            tr                  align  right                           table  th  td                                border  solid 1px  DDD                  border-collapse  collapse                  padding  2px 3px                  text-align  center                            th                   font-weight bold                         lt  style gt       lt  head gt       lt body gt           lt input type  button  onclick  CreateTableFromJSON    value  Create Table From JSON    gt           lt div id  showData  gt  lt  div gt       lt  body gt        lt script gt          function CreateTableFromJSON                 var obj       city   AMBALA   cStatus   Y                             city   ASANKHURD   cStatus   Y                             city   ASSANDH   cStatus   Y          var table   document createElement  table         var tr   table insertRow -1        function iterate obj table tr            for var props in obj                if obj hasOwnProperty props                     if typeof obj props    object                                                 var trNext   table insertRow -1                           var tabCellHead   trNext insertCell -1                           var tabCell   trNext insertCell -1                           var table in   document createElement  table                             var tr in                          var th   document createElement  th                                  th innerHTML   props                           tabCellHead appendChild th                           tabCell appendChild table in                          iterate obj props  table in tr in                                         else                                               if tr     undefined                                                        tr   table insertRow -1                                                     var tabCell   tr insertCell -1                           console log props       obj props                            tabCell innerHTML   obj props                                                             iterate obj table tr        var divContainer   document getElementById  showData                divContainer innerHTML                   divContainer appendChild table               lt  script gt       lt  html gt

User · Answer

HTML    lt div id  container  gt  lt  div gt     JS        search   click function           ajax           type   POST           url   cityResults htm           data      cityDetails   serialize            dataType  json     to parse string into JSON object          success  function data                     var len   data length                  var txt                       if len  gt  0                       for var i 0 i lt len i                                  txt     lt tr gt  lt td gt   data i  city   lt  td gt  lt td gt   data i  cStatus   lt  td gt  lt  tr gt                                    container   append txt                                               error  function jqXHR  textStatus  errorThrown               alert  error      textStatus          errorThrown                         return false

User · Answer

Try this   CSS    hidden display none     HTML    lt table id  table  class  hidden  gt       lt tr gt           lt th gt City lt  th gt           lt th gt Status lt  th gt       lt  tr gt   lt  table gt    JS       search   click function           ajax           type   POST           url   cityResults htm           data      cityDetails   serialize            dataType  json     to parse string into JSON object          success  function data                if data                   var len   data length                  var txt                       if len  gt  0                       for var i 0 i lt len i                             if data i  city  amp  amp  data i  cStatus                               txt      lt tr gt  lt td gt   data i  city   lt  td gt  lt td gt   data i  cStatus   lt  td gt  lt  tr gt                                                                        if txt                                     table   append txt  removeClass  hidden                                                                             error  function jqXHR  textStatus  errorThrown               alert  error      textStatus          errorThrown                         return false   suppress natural form submission

User · Answer

As an alternative to the answers you already have  and for others that come accross this post  I recently had a similar task and created a small jquery plug in to do it for me  Its pretty small under 3KB minified  and has sorting  paging and the ability to show and hide columns    It should be pretty easy to customize using css  More information can be found here http   mrjsontable azurewebsites net  and the project is available for you to do as you wish with on github https   github com MatchingRadar Mr JsonTable  To get it to work download the files and pop them in your site  Follow the instructions and you should end up with something like the following      lt div id  citytable  gt  lt  div gt    Then in the ajax success method you will want something like this  success  function data            citytable   mrjsontable           tableClass   my-table           pageSize  10    you can change the page size here         columns                new   fn mrjsontablecolumn                   heading   City                   data   city                              new   fn mrjsontablecolumn                   heading   City Status                   data   cStatus                                    data  data             Hope it helps somebody else

User · Answer

lt table id  myData  gt              lt  table gt               lt script type  text javascript  gt                    search   click function                         alert  submit handler has fired                          ajax                           type   POST                           url   cityResults htm                           data      cityDetails   serialize                             success  function data                                  each data  function  index  value                                    var row       lt tr gt  lt td gt     value city     lt  td gt  lt td gt     value cStatus     lt  td gt  lt  tr gt                                        myData   append row                                                                                      error  function jqXHR  textStatus  errorThrown                               alert  error      textStatus          errorThrown                                                                         return false   suppress natural form submission                           lt  script gt    loop through the data and append it to a table like the code above

User · Answer

There are many plugins for doing that  I normally use datatables it works great  http   datatables net

User · Answer

check below link to convert JSON data to standard HTML table in the simplest and fastest way   http   crunchify com crunchifyjsontohtml-js-json-to-html-table-converter-script

User · Answer

Please use datatable if you want to get result from json object  Datatable also works in the same manner of converting the json result into table format with the facility of searchable and sortable columns automatically

[jquery] Display JSON Data in HTML Table

Examples related to jquery

Examples related to spring-mvc