How to display a json array in table format

Question

I have a json array with this format                   id    001           name    apple           category    fruit           color    red                       id    002           name    melon           category    fruit           color    green                       id    003           name    banana           category    fruit           color    yellow            Now  I want to parse and display it in table format in Javascript or jQuery  The table has four columns  and each column indicates each attribute of each element in this array  The first row of this table is the name of these four keys  And the other rows are the values of these keys   I don t know how to write a JavaScript code to achieve this function  Could you help me with this

User · Answer

var jArr           id    001       name    apple       category    fruit       color    red           id    002       name    melon       category    fruit       color    green           id    003       name    banana       category    fruit       color    yellow       var tableData     lt table gt  lt tr gt  lt td gt Id lt  td gt  lt td gt Name lt  td gt  lt td gt Category lt  td gt  lt td gt Color lt  td gt  lt  tr gt      each jArr  function index  data     tableData      lt tr gt  lt td gt   data id   lt  td gt  lt td gt   data name   lt  td gt  lt td gt   data category   lt  td gt  lt td gt   data color   lt  td gt  lt  tr gt            div   html tableData

User · Answer

using jquery   each you can access all data and also set in table like this   lt table style  width  100   gt        lt thead gt             lt tr gt                  lt th gt Id lt  th gt                  lt th gt Name lt  th gt                  lt th gt Category lt  th gt                  lt th gt Color lt  th gt              lt  tr gt        lt  thead gt        lt tbody id  tbody  gt        lt  tbody gt   lt  table gt     each data  function  index  item         var eachrow     lt tr gt                        lt td gt     item 1      lt  td gt                        lt td gt     item 2      lt  td gt                        lt td gt     item 3      lt  td gt                        lt td gt     item 4      lt  td gt                        lt  tr gt             tbody   append eachrow

User · Answer

DEMO  var obj                         id    001               name    apple               category    fruit               color    red                                   id    002               name    melon               category    fruit               color    green                                   id    003               name    banana               category    fruit               color    yellow                      var tbl     lt table  gt    attr  id   mytable            div1   append tbl       for var i 0 i lt obj length i                  var tr   lt tr gt            var td1   lt td gt   obj i   id     lt  td gt            var td2   lt td gt   obj i   name     lt  td gt            var td3   lt td gt   obj i   color     lt  td gt  lt  tr gt                mytable   append tr td1 td2 td3

User · Answer

var data                   id    001           name    apple           category    fruit           color    red                       id    002           name    melon           category    fruit           color    green                       id    003           name    banana           category    fruit           color    yellow            for var i   0  len   data length  i  lt  length  i          var temp     lt tr gt  lt td gt     data i  id     lt  td gt        temp     lt td gt     data i  name    lt  td gt        temp     lt td gt     data i  category     lt  td gt        temp     lt td gt     data i  color     lt  td gt  lt  tr gt           table tbody   append temp

[javascript] How to display a json array in table format?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to json