Convert JSON data to HTML table

Question

I have a JSON code like

{
"id": 114363527,
"userId": "1",
"uploadedBy": "JaisonJustus",
"dataSource": "gdocs",
"rowcount": "3",
"colcount": "3",
"data": {
    "0": {
        "rowName": "",
        "rowId": "2",
        "colName": "Category Name",
        "colId": "A",
        "value": "Beverages"
    },
    "1": {
        "rowName": "",
        "rowId": "2",
        "colName": "Quantity",
        "colId": "B",
        "value": "925"
    },
    "2": {
        "rowName": "",
        "rowId": "2",
        "colName": "Amount",
        "colId": "C",
        "value": "$277"
    },
    "3": {
        "rowName": "",
        "rowId": "3",
        "colName": "Category Name",
        "colId": "A",
        "value": "Condiments"
    },
    "4": {
        "rowName": "",
        "rowId": "3",
        "colName": "Quantity",
        "colId": "B",
        "value": "378"
    },
    "5": {
        "rowName": "",
        "rowId": "3",
        "colName": "Amount",
        "colId": "C",
        "value": "$107"
    },
    "6": {
        "rowName": "",
        "rowId": "4",
        "colName": "Category Name",
        "colId": "A",
        "value": "Confections"
    },
    "7": {
        "rowName": "",
        "rowId": "4",
        "colName": "Amount",
        "colId": "C",
        "value": "$22877"
    }
}
}

I need to display the values in a html table using js/jquery like

     A           B           C
--|-----------|-------- |-------------|-
 2|Beverages  |   925   |    $277     |           
 3|Condiments |   378   |    $107     |   
 4|Confections|    --   |    $22877   |   
  |           |         |             |

The JSON also may contain the null values. The fields are displayed with respect to rowId and colId. The table values are displayed in JSON field 'value'.

stackoverflow.com/questions/1051061/…

Chad Ferguson
– Chad Ferguson

2012-03-01 13:51:38 +00:00
Commented Mar 1, 2012 at 13:51 — Chad Ferguson
– Chad Ferguson, Commented Mar 1, 2012 at 13:51
stackoverflow.com/questions/5180382/…

Chad Ferguson
– Chad Ferguson

2012-03-01 13:52:21 +00:00
Commented Mar 1, 2012 at 13:52 — Chad Ferguson
– Chad Ferguson, Commented Mar 1, 2012 at 13:52

score 5 · Accepted Answer · 2012-03-01 14:34:34Z

ONE METHOD:

http://www.json.org/

Use the above link and grab the function for handling JSON response and include in you js file

/*setting the var to hold the json array*/
var jsonReturn = xmlhttp.responseText;

/*parse the JSON data using the JSON function from the JSON website*/
var jsonReturn = json_parse(jsonReturn);

/*now you can access all the data in the typical javascript array format... eg:*/
var returnedID = jsonReturn.id;
var userId = jsonReturn.userId;

/*repeat the above to get all the data you need*/
 /*.......
      ........*/

/*now you can loop through the data array*/
for(var x=0; x < jsonReturn.data.length; x++)
 {
   var rowName = jsonReturn.data[x].rowName;
   var rowId= jsonReturn.data[x].rowId;
   var colName= jsonReturn.data[x].colName;
   var colId= jsonReturn.data[x].colId;
   var value= jsonReturn.data[x].value;

   /** now you have all the data you need from the JSON response you can bever away and generate the table **/
 }

Bruno · Accepted Answer · 2012-03-01 13:54:09Z

2

SlickGrid will allow you to do that. You may have to convert the data model slightly for what it expects, but SlickGrid has a model system that allows for this (one of the more advanced examples being in the RemoteModel, for data retrieved via AJAX).

(Strictly speaking, you don't get an HTML <table/> out of it, but a number of <div/> elements.)

answered Mar 1, 2012 at 13:54

Bruno

123k33 gold badges278 silver badges389 bronze badges

Comments

dov.amir · Accepted Answer · 2012-03-01 14:03:34Z

1

I use http://datatables.net/usage/ which is simpler, or http://www.trirand.com/blog/ that has more features .

answered Mar 1, 2012 at 14:03

dov.amir

11.7k7 gold badges48 silver badges51 bronze badges

Collectives™ on Stack Overflow

Convert JSON data to HTML table

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related