Passing dynamic JSON data to create a HTML table

Question

I have a function that receives JSON data, it can be any length and contain any number of columns and rows of data.

I have read that jqGrid would be a good jQuery plugin to use for this scenario but I cannot get it to work.

I have the following code to try and get my table to be populated:

//This code is in another section of my web page but the data is valid 
//and is populated over a websocket
var ss = $.parseJSON(data);
var theGrid = jQuery("#list1")[0];
theGrid.addJSONData(ss.NewDataSet.SECURITY_GROUPS);
//alert(ss.NewDataSet.SECURITY_GROUPS[0].NAME);

$(document).ready(function() {
           jQuery("#list1").jqGrid({
            datatype: "local",
            height: 250,
            multiselect: true,
            caption: "Manipulating Array Data"
        });
         });

<table id="list1"></table>

Shouldn't theGrid.addJSONData(ss.NewDataSet.SECURITY_GROUPS); be in the document.ready ? Are you sure the data is not getting populated before jqGrid is initialized ? — aziz punjani
– aziz punjani, Commented Sep 19, 2011 at 15:41
No, I make the request to the page and document ready gets fired etc, then I click a button which then populates my JSON object. It is at this point I want to send this to a HTML table — Jon
– Jon, Commented Sep 19, 2011 at 15:44

Adam Terlson · Accepted Answer · 2011-09-19 16:26:07Z

1

Maybe give DataTables a try if jqGrid isn't working for you. It's probably my favorite, and super easy to load via JSON as you've described.

Here's how to load from an AJAX source: http://datatables.net/release-datatables/examples/data_sources/ajax.html

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": '../ajax/sources/arrays.txt'
    });
});

UPDATE

var columnArr = [];
var valueArr = [];
var data = ss.NewDataSet.SECURITY_GROUPS; //data is your SECURITY_GROUPS object

//Strip the titles off your first array item only since they are all the same.
$.each(data[0], function(key, value) {
    columnArr.push({"sTitle" : key});
});

$.each(data, function(key, value) {
    var innerArr = [];
    $.each(value, function(innerKey, innerValue) {
        innerArr.push(innerValue);
    });
    valueArr.push(innerArr);
});

$('#example').dataTable( {
    "aaData": valueArr,
    "aoColumns": columnArr
});

edited Sep 19, 2011 at 16:26

answered Sep 19, 2011 at 15:43

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jon Over a year ago

But its not via AJAX and I also dont know the layout of the HTML table which I believe DataTables requires. I just want to throw a JSON object to it and let it draw

Adam Terlson Over a year ago

Check this one out: datatables.net/release-datatables/examples/data_sources/… You can just bind it right to your object literal (note: JSON is by definition a string, not an object). As far as I'm aware, it doesn't care how many columns or whatever you have, it'll manage just fine. The only thing you'll need to do is strip out the column headers so it knows where those are, if you have any.

Jon Over a year ago

Here is my JSON. gist.github.com/1226807 The stuff I'm interested in is from line 103 onwards. In that example you posted is there a way I can loop through the first set of data and draw the column names?

Adam Terlson Over a year ago

See my update. I coded it blindly, so I don't promise a lack of bugs, but it should set you in the right direction.

Jon Over a year ago

You my friend are a legend. Thanks very much! Only one minor typo in your example

|

Collectives™ on Stack Overflow

Passing dynamic JSON data to create a HTML table

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related