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

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

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

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

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     lt table class  table table-bordered table-condensed table-striped    gt        if   isArray json            if json length     0               return                else               const first   json 0               if   isPlainObject first                    tab     newTable                   const row       lt tr   gt                     tab append row                     each  first  function  key  value                         row append     lt th   gt    addClass colKeyClassMap key   text key                                          each  json  function  key  value                         const row       lt tr   gt                           each  value  function  key  value                             row append     lt td   gt    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       lt tr   gt                         const td       lt td   gt                         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                      lt tr   gt                         append     lt th style  width  20     gt    addClass rowKeyClassMap key   text key                        append     lt td   gt    addClass rowKeyClassMap key   html toTable value  colKeyClassMap  rowKeyClassMap                          return tab        else if  typeof json      string             if json slice 0  4       http                return   lt a target   blank  href    json    gt   json   lt  a gt                      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

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

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

[jquery] Display JSON Data in HTML Table

Examples related to jquery

Examples related to spring-mvc