how to draw a table using JQuery or Javascript from a JSON Object

Question

{
    "content": {
        "title": "Schema",
        "cellValues": [
            [
                "c1",
                "count"
            ],
            [
                "DoubleType",
                "LongType"
            ]
        ],
        "id": 3,
        "name": "Histogram",
        "type": "table"
    }
}

I have this JSON coming , from this i want to make a table using javascript or Jquery. The output should be like. The JSON object is coming as cell values in a list , that is creating a problem. I want to map c1 with DoubleType and count with longType in each cell.

  c1             count
  DoubleType     LongType

Please suggest...

I want as c1 and count in one row and DoubleType and Longtype is next row ... Like a table — Atul kumar singh, Jan 11 '16 at 18:25
Please provide an example of the HTML table you are trying to achieve with the above JSON, as part of your question. — Bill Martin, Jan 11 '16 at 18:28

Bill Martin · Accepted Answer · 2016-01-12T17:08:03.907

Check out this JSFiddle for a running example.

Create Table

function createTable(tableData) {
    var tableId    = tableData.content.id;
    var tableName  = tableData.content.name;
    var tableTitle = tableData.content.title;
    var tableRows  = tableData.content.cellValues;

    // create table
    $('body').append('<table border="1" id="' + tableId + '" name="' + tableName + '"></table>');

    // create title
    $('#'+tableId).append('<caption>' + tableTitle + '</caption>');

    // create rows
    for (var i = 0; i < tableRows.length; i++) {
        createRow(tableId, tableRows[i]);
    }
}

Create Rows and Cells

function createRow(table_id, rowData) {
    var row = $("<tr />")
    $("#"+table_id).append(row);

    // create cells inside this row
    for (var i = 0; i < rowData.length; i++) {
        row.append($("<td>" + rowData[i] + "</td>"));
    }
}

score 0 · Answer 2 · answered Jan 11 '16 at 18:29

0

You might be interested in using a plug in such as DataTables which can use a JSON feed as its source.

https://www.datatables.net/

answered Jan 11 '16 at 18:29

Ja C.

1
1

.. I dont want to include datatables .. Because only here i have to print a table. Without using datatable through Jquery and Javascript i want to do this... Thanks for your reply by the way... – Atul kumar singh Jan 11 '16 at 18:35

score 0 · Answer 3 · answered Jan 11 '16 at 18:57

$(function() {
    var json = {
        "content": {
            "title": "Schema",
            "cellValues": [
                [
                    "c1",
                    "count"
                ],
                [
                    "DoubleType",
                    "LongType"
                ]
            ],
            "id": 3,
            "name": "Histogram",
            "type": "table"
        }
    };
    //Define & initialize vars
    var table = $('<table cellspacing="0" cellpadding="3" border="1"/>'),
      tbody = $('<tbody/>'),
      tr = $('<tr/>'),
      td = $('<td/>');
    //create rows in tbody
    $.each(json.content.cellValues, function(i,v) {
        var thisTR = tr.clone();
        $.each(v, function(j,u) {
            thisTR.append( td.clone().html( u ) );
        });
        tbody.append( thisTR );
    });
    //append tbody to table
    table.append( tbody );
    //append table to DOM
    $('#table').html( table );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="table"></div>

how to draw a table using JQuery or Javascript from a JSON Object

3 Answers3

Create Table

Create Rows and Cells