Parsing JSON objects for HTML table

Question

I am trying to display a  leaderboard  table based on JSON data   I have read a lot about the JSON format and overcome some initial obstacles  but my Javascript knowledge is very limited and I need help   Basically my JSON data comes through looking like this      User Name   John Doe   score   10   team   1     User Name   Jane Smith   score   15   team   2     User Name   Chuck Berry   score   12   team   2      What I need is to be able to loop through this array  generating a table row or list item for each object  There will be an unknown amount of total objects in the array but each will have the same format- three values  Name  Score  Team   So far I have used the following code  which confirms that I am successfully loading the objects in the console-     getJSON url  function data     console log data         but I am not sure how to iterate over them  parsing them into the HTML table   The next step is sorting the entries by score in descending order     Any help would be much appreciated  Thanks   EDIT   Updated code below  this works     getJSON url  function  data        var tr      for  var i   0  i  lt  data length  i              tr       lt tr  gt             tr append   lt td gt     data i  User Name     lt  td gt             tr append   lt td gt     data i  score     lt  td gt             tr append   lt td gt     data i  team     lt  td gt                table   append tr                The   parseJSON was not necessary  we can use  data  as the JSON array is already parsed I believe

User · Answer

This code will help a lot  function isObject data       var tb   document createElement  table         if data   null            var keyOfobj   Object keys data           var ValOfObj   Object values data            for  var i   0  i  lt  keyOfobj length  i                  var tr   document createElement  tr                var td   document createElement  td                var key   document createTextNode keyOfobj i                 td appendChild key               tr appendChild td               tb appendChild tr                if typeof ValOfObj i       object                      if ValOfObj i    null                        tr setAttribute  style   font-weight  bold                           isObject ValOfObj i                      else                       var td   document createElement  td                        var value   document createTextNode ValOfObj i                         td appendChild value                       tr appendChild td                       tb appendChild tr                                   else                   var td   document createElement  td                    var value   document createTextNode ValOfObj i                     td appendChild value                   tr appendChild td                   tb appendChild tr

User · Answer

You can use simple jQuery jPut plugin  http   plugins jquery com jput    lt script gt    document  ready function     var json      name    name1   score   30     name    name2   score   50       while running this code the template will be appended in your div with json data     tbody   jPut       jsonData json        ajax url  youfile json    if you want to call from a json file     name  tbody template             lt  script gt       lt div jput  tbody template  gt    lt tr gt     lt td gt   name   lt  td gt     lt td gt   score   lt  td gt    lt  tr gt   lt  div gt    lt table gt    lt tbody id  tbody  gt    lt  tbody gt   lt  table gt

User · Answer

Here are two ways to do the same thing  with or without jQuery    x000D   x000D     jquery way x000D    document  ready function      x000D       x000D    var json      User Name   John Doe   score   10   team   1     User Name   Jane Smith   score   15   team   2     User Name   Chuck Berry   score   12   team   2     x000D           x000D    var tr  x000D    for  var i   0  i  lt  json length  i      x000D      tr       lt tr  gt     x000D      tr append   lt td gt     json i  User Name     lt  td gt     x000D      tr append   lt td gt     json i  score     lt  td gt     x000D      tr append   lt td gt     json i  team     lt  td gt     x000D         table   first   append tr   x000D        x000D      x000D   x000D     without jquery x000D  function ready    x000D   var json      User Name   John Doe   score   10   team   1     User Name   Jane Smith   score   15   team   2     User Name   Chuck Berry   score   12   team   2     x000D    const table   document getElementsByTagName  table   1   x000D    json forEach  obj    gt    x000D        const row   table insertRow -1  x000D      row innerHTML     x000D         lt td gt   obj User Name  lt  td gt  x000D         lt td gt   obj score  lt  td gt  x000D         lt td gt   obj team  lt  td gt  x000D         x000D        x000D     x000D   x000D  if  document attachEvent   document readyState      complete    document readyState      loading    x000D    ready    x000D    else   x000D    document addEventListener  DOMContentLoaded   ready   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D       lt tr gt  x000D           lt th gt User Name lt  th gt  x000D           lt th gt score lt  th gt  x000D           lt th gt team lt  th gt  x000D       lt  tr gt  x000D   lt  table gt   x000D   lt table gt  x000D       lt tr gt  x000D           lt th gt User Name lt  th gt  x000D           lt th gt score lt  th gt  x000D           lt th gt team lt  th gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Loop over each object  push in string array and join them  Append in target table  it is better     document  ready function        getJSON url  function  json        var tr         for  var i   0  i  lt  json length  i              tr push   lt tr gt             tr push   lt td gt     json i  User Name     lt  td gt             tr push   lt td gt     json i  score     lt  td gt             tr push   lt td gt     json i  team     lt  td gt             tr push   lt  tr gt                  table   append   tr join

User · Answer

Make a HTML Table from a JSON array of Objects by extending   as shown below     makeTable   function  mydata                var table       lt table border 1 gt                 var tblHeader     lt tr gt                for  var k in mydata 0   tblHeader      lt th gt     k     lt  th gt                tblHeader      lt  tr gt                  tblHeader  appendTo table                 each mydata  function  index  value                    var TableRow     lt tr gt                      each value  function  key  val                        TableRow      lt td gt     val     lt  td gt                                        TableRow      lt  tr gt                      table  append TableRow                               return    table                 and use as follows   var mydata   eval jdata   var table     makeTable mydata     table  appendTo   TableCont      where TableCont is some div

User · Answer

Loop over each object  appending a table row with the relevant data each iteration     document  ready function            getJSON url      function  json            var tr          for  var i   0  i  lt  json length  i                  tr       lt tr  gt                 tr append   lt td gt     json i  User Name     lt  td gt                 tr append   lt td gt     json i  score     lt  td gt                 tr append   lt td gt     json i  team     lt  td gt                    table   append tr                           JSFiddle

User · Answer

I spent a lot of time developing various reports  So  now I have an idea - create a web framework for building web reports  I have started here   https   github com ColdSIce ReportUI  Now it is an angular 4 module  You can pass your json data to TableLayoutComponent and get a HTML table as result  Table already has fixed header  Also you can fix some your columns by default or by click  More there  you can customize table properties like background-color  font-color  row-height etc    If you are interested you can join me in this project and help

User · Answer

Here is an another way to parse json object into Html table    x000D   x000D    EXTRACT VALUE FOR HTML HEADER  x000D       Book ID    Book Name    Category  and  Price   x000D  var col       x000D   x000D  for  var i   0  i  lt  d length  i      x000D    for  var key in d i     x000D  if  col indexOf key      -1    x000D    col push key   x000D    x000D      x000D    x000D   x000D     CREATE DYNAMIC TABLE  x000D  var table   document createElement  table    x000D   x000D     CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE  x000D  var tr   table insertRow -1         TABLE ROW                 x000D                    x000D  for  var i   0  i  lt  col length  i      x000D    var th   document createElement  th      TABLE HEADER  x000D    th innerHTML   col i   x000D    tr appendChild th   x000D    x000D   x000D     ADD JSON DATA TO THE TABLE AS ROWS  x000D  for  var i   0  i  lt  d length  i      x000D    tr   table insertRow -1   x000D   x000D    for  var j   0  j  lt  col length  j      x000D  var tabCell   tr insertCell -1   x000D  tabCell innerHTML   d i  col j    x000D      x000D    x000D   x000D     FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER  x000D  var divContainer   document getElementById  showData    x000D  divContainer innerHTML       x000D  divContainer appendChild table   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

another nice recursive way to generate HTML from a nested JSON object  currently not supporting arrays       generate HTML code for an object var make table   function json  css class  tbl calss   tabs 1          helper to tabulate the HTML tags  will return   t t t  for num of tabs 3     var tab   function num of tabs           var s               for  var i 0  i lt num of tabs  i                 s      t                       console log  tabbing done  tabs     tabs          return s               recursive function that returns a fixed block of  lt td gt        lt  td gt       var generate td   function json            if    typeof json      object                    for primitive data - direct wrap in  lt td gt     lt  td gt              return tab tabs      lt td gt   json   lt  td gt  n            else                 recursive call for objects to open a new sub-table inside the  lt td gt     lt  td gt                  object key  may be also an object              var s   tab   tabs    lt td gt  n               s           tab   tabs    lt table class    css class    gt  n               for  var k in json                   s           tab   tabs    lt tr gt  n                   s             tab   tabs    lt td gt     k     lt  td gt  n                   s                         generate td json k                    s           tab --tabs    lt  tr gt     tab --tabs      n                                  close the  lt td gt     lt  td gt  external block             s           tab tabs--    lt  table gt  n               s       tab tabs--    lt  td gt  n               return s                         construct the complete HTML code     var html code            html code    tab   tabs    lt table class    css class    gt  n       html code      tab   tabs    lt tr gt  n       html code        generate td json       html code      tab tabs--    lt  tr gt  n       html code    tab tabs--    lt  table gt  n       return html code

User · Answer

You can use KnockoutJS with jQuery  KnockoutJS have smart data-binding features  By using the  foreach binding feature you can write your code like this example   HTML    lt table gt       lt thead gt           lt tr gt               lt th gt User Name lt  th gt               lt th gt Score lt  th gt               lt th gt Team lt  th gt           lt  tr gt       lt  thead gt       lt tbody data-bind  foreach  teams  gt           lt tr gt               lt td data-bind  text  User Name  gt  lt  td gt               lt td data-bind  text  score   gt  lt  td gt               lt td data-bind  text  team   gt  lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    JavaScript     document  ready function                getJSON url function  json                   ko applyBindings                     teams  json                                                       Fiddle Demo with your dummy data

User · Answer

This one is ugly  but just want to throw there some other options to the mix  This one has no loops  I use it for debugging purposes  var myObject    a 1 b 2 c 3 d  a 1 b 2 c 3 e  a 1    var myStrObj   JSON stringify myObject  var myHtmlTableObj   myStrObj replace    g   lt table gt  lt tr gt  lt td gt    replace    g   lt  td gt  lt td gt    g   replace    g   lt  td gt  lt  tr gt  lt tr gt  lt td gt    g   replace    g   lt  table gt         myDiv   html myHtmlTableObj    Example    x000D   x000D      var myObject    a 1 b 2 c 3 d  a 1 b 2 c 3 e  a 1    x000D      var myStrObj   JSON stringify myObject  x000D      var myHtmlTableObj   myStrObj replace     g     replace    g   lt table gt  lt tr gt  lt td gt    replace    g   lt  td gt  lt td gt    g   replace    g   lt  td gt  lt  tr gt  lt tr gt  lt td gt    g   replace    g   lt  table gt    x000D   x000D          myDiv   html myHtmlTableObj  x000D   myDiv table td background whitesmoke border 1px solid lightgray  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt div id  myDiv  gt table goes here lt  div gt  x000D   x000D   x000D

User · Answer

This post is very much helpful to all of you   First Parse the json data by using jquery eval parser and then iterarate through jquery each function below is the code sniplet                   var obj   eval       data d                          alert obj                     each obj  function  index Object                         var Id   Object Id                      var AptYear   Object AptYear                          ddlyear   append   lt option value     Id     gt     AptYear     lt  option gt    toString

[javascript] Parsing JSON objects for HTML table

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to arrays

Examples related to json