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'.

http://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquery — DisplayName, Mar 01 '12 at 13:51
http://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table — DisplayName, Mar 01 '12 at 13:52

score 5 · Answer 1 · 2012-03-01T14:34:34.773

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 **/
 }

score 2 · Answer 2 · answered Mar 01 '12 at 13:54

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.)

score 1 · Answer 3 · answered Mar 01 '12 at 14:03

1

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

answered Mar 01 '12 at 14:03

dov.amir

11,489
7
45
51

Convert JSON data to HTML table

3 Answers3