drawing a table from a json structure coming as array using jquery or javascript

Question

I am getting a JSON object. I have to print a tabular structure from that. After debugging , i have found the object is coming as

tableData = {title: "Schema", cellValues: Array[2], id: 1, name: "CSV", type: "table"}

When i do further debugging then i found following result

var tableRows = tableData.cellValues;
tableRows = [Array[4], Array[4]]

If i do a console.log(tableRows) it gives as --> c1,c2,c3,c4,DoubleType,DoubleType,DoubleType,DoubleType

I have to print it in a tabular form as

c1      count       c1      count
DoubleType  LongType    DoubleType  LongType

I am not able to understand how should i do that.How to manipulate this to get the table structure. Some help will be really appreciated. thanks..

Possible duplicate of [Convert json data to a html table](http://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table) — Mike Cluck, Jan 12 '16 at 16:27
Where's `longType` coming from? Your cellValues don't seem to match your required output is what I'm saying. — Andy, Jan 12 '16 at 16:30
@MikeC .. I think its not same case. Because , here in JSON i am getting the data as cellValues: Array[2] , when i run in debug mode. If i get like in that case which you have mentioned then , it would be much easier to build. — Atul kumar singh, Jan 12 '16 at 16:32
@Andy I was trying to give an example .. How the table should look like .. 2 rows and number of columns depends on the number of values which i get — Atul kumar singh, Jan 12 '16 at 16:34

score 0 · Answer 1 · answered Jan 12 '16 at 17:23

I might try something like this. I've used three row of data including the heading data to broaden the demo.

var tableData = {
  cellValues: [
    ['c1', 'c2', 'c3', 'c4'],
    ['DoubleType', 'longType', 'DoubleType', 'longType'],
    ['Bob', 'Dave', 'Bob', 'Dave']
  ]
}

Shift the first array in cellValues into headerData. bodyData is what remains.

var headerData = tableData.cellValues.shift();
var bodyData = tableData.cellValues;

Hashmap-based helper function that delivers lines of cells based on type.

function buildCells(data, type) {
  return {
    header: '<th>' + data.join('</th><th>') + '</th>',
    row: '<td>' + data.join('</td><td>') + '</td>'
  }[type];
}

Helper function that builds each data row.

function buildRow(data) {
  return ['<tr>', buildCells(data, 'row'), '</tr>'].join('');
}

Build the set of row data.

var rows = bodyData.reduce(function(p, c) {
  return p.concat(buildRow(c));
}, []);

Pad out the header, body, and finally, table with the appropriate tags

var header = ['<thead>', buildCells(headerData, 'header'), '</thead>'].join('');
var body = ['<tbody>', rows.join(''), '</tbody>'].join('');
var table = ['<table>', header, body, '</table>'].join('');

Now you can do what you like with the HTML. In the example I use insertAdjacentHTML to add it to an element.

DEMO

drawing a table from a json structure coming as array using jquery or javascript

1 Answers1