Get both column names (& no. of columns) and row contents via AJAX/JSON

p.m.reid@dunelm.org.uk

Hello. I am new to this and using this as a tool rather than as a professional dev....

In my HTML file, I have a <table id="testElements">, it has a <thead></thead> and <tbody></tbody>

In the JS section at the top, I make a call to a PHP file via AJAX that returns a valid JSON object. In other tables I've created, I am able to successfully set the data if column headers are already defined with<th>Col1</th> etc in <thead>.

This page loads data about students' test results... each column (except first two...) are student names, the rows are colour codes for a certain skill. How can I load column headers and data dynamically?

$.getJSON( "./ajax2.php?grade=C&test=5&group=10A%2FMa1", null, function (json) {
                var te=$("#testElements").dataTable( {
                "processing": true,
                "paging": false,
                "jQueryUI": true,
                "columns": json.columns,
                "data": json.data

                } );
} );

The AJAX page returns a JSON element that looks like this (I have cut it down a bit... but original is 'validated' using online JSON validator...

{"columns":[[{"title":"Skill"},{"title":"Description"},{"title":"NAME 1"},{"title":"NAME 2"},{"title":"NAME 3"},{"title":"NAME 4"},{"title":"NAME 5"},{"title":"NAME 6"},{"title":"NAME 7"},{"title":"NAME 8"},{"title":"NAME 9"},{"title":"NAME 10"},{"title":"NAME 11"},{"title":"NAME 12"},{"title":"NAME 13"},{"title":"NAME 14"},{"title":"NAME 15"}]],"data":[[1,"SKILL XYS","G","G","G","G","G","G","G","R","G","G","R","R","G","G","G"],[2,"SKILL XYS","G","G","G","G","G","G","R","A","G","G","R","G","A","G","G"],[3,"SKILL XYS","G","G","G","G","G","R","G","R","G","G","G","G","G","R","G"],[4,"SKILL XYS","G","G","G","R","G","G","R","A","G","G","R","R","G","G","G"],[5,"SKILL XYS","G","G","G","G","R","G","R","G","R","R","R","R","G","G","R"],[6,"SKILL XYS","G","A","G","G","G","G","R","R","R","R","G","A","R","G","G"],[7,"SKILL XYS","R","R","R","R","G","G","R","R","G","R","R","R","R","R","G"],[8,"SKILL XYS","G","G","G","R","G","G","G","G","G","R","G","G","G","G","G"],[9,"SKILL XYS","G","R","G","G","G","G","R","G","G","G","R","G","G","G","G"],[10,"SKILL XYS","R","A","R","G","G","R","R","R","R","R","R","R","G","R","A"],[11,"SKILL XYS","R","G","G","G","G","G","R","A","G","G","G","G","G","G","G"],[12,"SKILL XYS","G","G","G","G","G","A","R","G","G","G","G","G","G","G","G"],[13,"SKILL XYS","G","G","G","G","G","G","G","R","G","G","G","G","G","G","G"]]}

This does not work and the table gets only one column, with the 1, 2, 3, 4, data from each row only. Any ideas what's going on?

allan

What you have done looks just about perfect to me and is exactly what I would suggest. The only probably I see is that column in the returned JSON is a 2D array for reason. If you just make it an array of objects, I suspect it will work.

Allan

p.m.reid@dunelm.org.uk

Thank you for confirming I'm not going mad! By 'make it an array of objects', do you mean remove the "title": part, so instead it is just a list of the names of the columns??
Thanks

allan

"columns":[[{"title":"Skill"},

Should be:

"columns":[{"title":"Skill"},

Allan

p.m.reid@dunelm.org.uk

Thank you so much - this was exactly the problem; really appreciated.