So you’ve just called your first REST service and have JSON array full of data… Where do you put it? I noticed lots of people using various plug-ins to create HTML tables by defining columns, data types, etc… but what happens when you don’t know this? Since I wanted to throw random JSON data into HTML tables, I created two helper functions that will iterate over the data to create the views.
This code below is an improvement to my ad-hoc JavaScript solution I created a few weeks ago for a ASP.NET project, link below. As you will see below, it’s pretty easy to render a HTML table from a object array using plain JavaScript. Since most results are in a Table or Detail layout, I created 2 functions to return the data in either format. I also added some optional parameters that you can set to control formatting. The Details View was designed to show a single row/object, the headers will display on the left and the data will display on the right (see second example).
[Update 3/22/2016]
A lot of people have been asking for nested object support, this is quick and dirty and can use a little refactoring… but it works. It now checks for nested objects/arrays, and renders those into tables of their own. You can mix the different views yourself, examples below.
// This function creates a standard table with column/rows // Parameter Information // objArray = Anytype of object array, like JSON results // theme (optional) = A css class to add to the table (e.g. <table class="<theme>"> // enableHeader (optional) = Controls if you want to hide/show, default is show function CreateTableView(objArray, theme, enableHeader) { // set optional theme parameter if (theme === undefined) { theme = 'lightPro'; //default theme } if (enableHeader === undefined) { enableHeader = true; //default enable headers } // If the returned data is an object do nothing, else try to parse var array = typeof objArray != 'object' ? JSON.parse(objArray) : new Array(objArray); var keys = Object.keys(array[0]); var str = '<table class="' + theme + '">'; // table head if (enableHeader) { str += '<thead><tr>'; for (var index in keys) { str += '<th scope="col">' + keys[index] + '</th>'; } str += '</tr></thead>'; } // table body str += '<tbody>'; for (var i = 0; i < array.length; i++) { str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>'; for (var index in keys) { var objValue = array[i][keys[index]]; // Support for Nested Tables if (typeof objValue === 'object' && objValue !== null) { if (Array.isArray(objValue)) { str += '<td>'; for (var aindex in objValue) { str += CreateTableView(objValue[aindex], theme, true); } str += '</td>'; } else { str += '<td>' + CreateTableView(objValue, theme, true) + '</td>'; } } else { str += '<td>' + objValue + '</td>'; } } str += '</tr>'; } str += '</tbody>' str += '</table>'; return str; } // This function creates a details view table with column 1 as the header and column 2 as the details // Parameter Information // objArray = Anytype of object array, like JSON results // theme (optional) = A css class to add to the table (e.g. <table class="<theme>"> // enableHeader (optional) = Controls if you want to hide/show, default is show function CreateDetailView(objArray, theme, enableHeader) { // set optional theme parameter if (theme === undefined) { theme = 'lightPro'; //default theme } if (enableHeader === undefined) { enableHeader = true; //default enable headers } // If the returned data is an object do nothing, else try to parse var array = typeof objArray != 'object' ? JSON.parse(objArray) : new Array(objArray); var keys = Object.keys(array[0]); var str = '<table class="' + theme + '">'; str += '<tbody>'; for (var i = 0; i < array.length; i++) { var row = 0; for (var index in keys) { var objValue = array[i][keys[index]] str += (row % 2 == 0) ? '<tr class="alt">' : '<tr>'; if (enableHeader) { str += '<th scope="row">' + keys[index] + '</th>'; } // Support for Nested Tables if (typeof objValue === 'object' && objValue !== null) { if (Array.isArray(objValue)) { str += '<td>'; for (var aindex in objValue) { str += CreateDetailView(objValue[aindex], theme, true); } str += '</td>'; } else { str += '<td>' + CreateDetailView(objValue, theme, true) + '</td>'; } } else { str += '<td>' + objValue + '</td>'; } str += '</tr>'; row++; } } str += '</tbody>' str += '</table>'; return str; }
Here is an example using the method above.
$(document).ready(function () { var json = { "hof_Details": { "CATEGORY_DESC_ENG": "SC", "AADHAR_ID": "780623649996", "STATE": "Rajasthan", "MOTHER_NAME_ENG": "hurami ", "BLOCK_CITY": "Shergarh" }, "family_Details": [ { "CATEGORY_DESC_ENG": "SC", "STATE": "Rajasthan", "MOTHER_NAME_ENG": "khetu devi ", }, { "CATEGORY_DESC_ENG": "SC", "STATE": "Rajasthan", "MOTHER_NAME_ENG": "SEETA ", } ] }; $('#results').html(CreateDetailView(json)); });
Rendered HTML Results
Use CreateDetailView w/nested CreateDetailView
Use CreateTableView w/nested CreateDetailView
Use CreateTableView w/nested CreateTableView
[ Below is the Original post from Apr 29, 2010 @ 15:48 ]
// This function creates a standard table with column/rows // Parameter Information // objArray = Anytype of object array, like JSON results // theme (optional) = A css class to add to the table (e.g. <table class="<theme>"> // enableHeader (optional) = Controls if you want to hide/show, default is show function CreateTableView(objArray, theme, enableHeader) { // set optional theme parameter if (theme === undefined) { theme = 'mediumTable'; //default theme } if (enableHeader === undefined) { enableHeader = true; //default enable headers } // If the returned data is an object do nothing, else try to parse var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; var str = '<table class="' + theme + '">'; // table head if (enableHeader) { str += '<thead><tr>'; for (var index in array[0]) { str += '<th scope="col">' + index + '</th>'; } str += '</tr></thead>'; } // table body str += '<tbody>'; for (var i = 0; i < array.length; i++) { str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>'; for (var index in array[i]) { str += '<td>' + array[i][index] + '</td>'; } str += '</tr>'; } str += '</tbody>' str += '</table>'; return str; } // This function creates a details view table with column 1 as the header and column 2 as the details // Parameter Information // objArray = Anytype of object array, like JSON results // theme (optional) = A css class to add to the table (e.g. <table class="<theme>"> // enableHeader (optional) = Controls if you want to hide/show, default is show function CreateDetailView(objArray, theme, enableHeader) { // set optional theme parameter if (theme === undefined) { theme = 'mediumTable'; //default theme } if (enableHeader === undefined) { enableHeader = true; //default enable headers } // If the returned data is an object do nothing, else try to parse var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; var str = '<table class="' + theme + '">'; str += '<tbody>'; for (var i = 0; i < array.length; i++) { var row = 0; for (var index in array[i]) { str += (row % 2 == 0) ? '<tr class="alt">' : '<tr>'; if (enableHeader) { str += '<th scope="row">' + index + '</th>'; } str += '<td>' + array[i][index] + '</td>'; str += '</tr>'; row++; } } str += '</tbody>' str += '</table>'; return str; }
Standard Table Example Usage:
$(document).ready(function() { $.ajax({ type: "POST", url: "/SampleRestService", contentType: "application/json; charset=utf-8", dataType: "json", data: "{}", success: function(res) { $('#Results').append(CreateTableView(res)).fadeIn(); } }); });
Details View Example Usage:
$(document).ready(function() { $.ajax({ type: "POST", url: "/SampleRestService", contentType: "application/json; charset=utf-8", dataType: "json", data: "{}", success: function(res) { $('#Results').append(CreateDetailView(res,"CoolTableTheme",true)).fadeIn(); } }); });
JSON to HTML JavaScript Source Code
That’s it, just do you normal jQuery ajax call and you can put your JSON into a HTML Table. This is a great way to test your JSON objects. I’ve tested the JSON to HTML on various object(s) and the results have been pretty good. If you find you need advanced features when your building your HTML table, you should look at something like jqGrid that has paging, sorting, etc…
[Update 10/6/2010]
A lot of people have asked for a full working HTML demo using JSON strings. The link below is a demo showing how to use the helpers with various JSON strings. Let me know if this helps!
#1 by Joson Responce but not abel to create table on March 21, 2016 - 11:24 pm
Quote
In below json there are two tag
1) hof_Details
2) family_Details [n ] — Array
kindly guide
#2 by Zach on March 22, 2016 - 11:42 pm
Quote
Just added an example to the post, you using your JSON data you can see how to post/support nested arrays/objects.
#3 by Joson Responce but not abel to create table on March 21, 2016 - 11:22 pm
Quote
{“hof_Details”:
{“CATEGORY_DESC_ENG”:”SC”,”AADHAR_ID”:”780623649996″,”STATE”:”Rajasthan”,”MOTHER_NAME_ENG”:”hurami “,”HOUSE_NUMBER_ENG”:null,”RELATION_ENG”:”Self”,”DOB”:”01/01/1982″,”ECONOMIC_GROUP”:”APL”,”BUILDING_NO_ENG”:null,”BHAMASHAH_ID”:”1428-WKMY-25373″,”STREET_NAME_ENG”:null,”IFSC_CODE”:”UCBA0003061″,”M_ID”:”0″,”FAMILYIDNO”:”WDYYYGG”,”PIN_CODE”:”342021″,”LANDLINE_NO”:null,”VILLAGE_NAME”:”Kalau”,”GP_WARD”:”KALAU”,”EMAIL”:null,”SPOUCE_NAME_ENG”:”kishana ram “,”IS_RURAL”:”Rural”,”DISTRICT”:”Jodhpur”,”EDUCATION_DESC_ENG”:”Literate”,”ACC_NO”:”30610110005033″,”ADDRESS”:”Kalau Kalau Shergarh Jodhpur Rajasthan “,”INCOME_DESC_ENG”:null,”BANK_NAME”:”UCO BANK”,”LAND_MARK_ENG”:null,”RATION_CARD_NO”:”00036″,”NAME_ENG”:”Seeta”,”MOBILE_NO”:”9549783966″,”GENDER”:”Female”,”FATHER_NAME_ENG”:”SUGANA ram “,”FAX_NO”:null,”BLOCK_CITY”:”Shergarh”},
“family_Details”:[
{“CATEGORY_DESC_ENG”:”SC”,”STATE”:”Rajasthan”,”MOTHER_NAME_ENG”:”khetu devi “,”HOUSE_NUMBER_ENG”:null,”RELATION_ENG”:”Husband”,”DOB”:”01/08/1974″,”MEMBER_AADHAR_ID”:”530541094061″,”ECONOMIC_GROUP”:”APL”,”BUILDING_NO_ENG”:null,”BHAMASHAH_ID”:”1428-WKMY-25373″,”STREET_NAME_ENG”:null,”IFSC_CODE”:null,”M_ID”:”2676696″,”FAMILYIDNO”:”WDYYYGG”,”PIN_CODE”:”342021″,”LANDLINE_NO”:null,”VILLAGE_NAME”:”Kalau”,”GP_WARD”:”KALAU”,”EMAIL”:null,”SPOUCE_NAME_ENG”:”Seeta”,”IS_RURAL”:”Rural”,”DISTRICT”:”Jodhpur”,”EDUCATION_DESC_ENG”:”Graduate”,”ACC_NO”:null,”ADDRESS”:”Kalau Kalau Shergarh Jodhpur Rajasthan “,”INCOME_DESC_ENG”:null,”BANK_NAME”:null,”LAND_MARK_ENG”:null,”RATION_CARD_NO”:”00036″,”NAME_ENG”:”kishana ram “,”MOBILE”:null,”GENDER”:”Male”,”FATHER_NAME_ENG”:”hamira ram “,”FAX_NO”:null,”BLOCK_CITY”:”Shergarh”},
{“CATEGORY_DESC_ENG”:”SC”,”STATE”:”Rajasthan”,”MOTHER_NAME_ENG”:”SEETA “,”HOUSE_NUMBER_ENG”:null,”RELATION_ENG”:”Son”,”DOB”:”08/10/2002″,”MEMBER_AADHAR_ID”:null,”ECONOMIC_GROUP”:”APL”,”BUILDING_NO_ENG”:null,”BHAMASHAH_ID”:”1428-WKMY-25373″,”STREET_NAME_ENG”:null,”IFSC_CODE”:null,”M_ID”:”2676698″,”FAMILYIDNO”:”WDYYYGG”,”PIN_CODE”:”342021″,”LANDLINE_NO”:null,”VILLAGE_NAME”:”Kalau”,”GP_WARD”:”KALAU”,”EMAIL”:null,”SPOUCE_NAME_ENG”:null,”IS_RURAL”:”Rural”,”DISTRICT”:”Jodhpur”,”EDUCATION_DESC_ENG”:”5 Pass”,”ACC_NO”:null,”ADDRESS”:”Kalau Kalau Shergarh Jodhpur Rajasthan “,”INCOME_DESC_ENG”:null,”BANK_NAME”:null,”LAND_MARK_ENG”:null,”RATION_CARD_NO”:”00036″,”NAME_ENG”:”pravin”,”MOBILE”:null,”GENDER”:”Male”,”FATHER_NAME_ENG”:”kishana ram “,”FAX_NO”:null,”BLOCK_CITY”:”Shergarh”},
{“CATEGORY_DESC_ENG”:”SC”,”STATE”:”Rajasthan”,”MOTHER_NAME_ENG”:”Seeta”,”HOUSE_NUMBER_ENG”:null,”RELATION_ENG”:”Daughter”,”DOB”:”27/12/2000″,”MEMBER_AADHAR_ID”:null,”ECONOMIC_GROUP”:”APL”,”BUILDING_NO_ENG”:null,”BHAMASHAH_ID”:”1428-WKMY-25373″,”STREET_NAME_ENG”:null,”IFSC_CODE”:null,”M_ID”:”2676697″,”FAMILYIDNO”:”WDYYYGG”,”PIN_CODE”:”342021″,”LANDLINE_NO”:null,”VILLAGE_NAME”:”Kalau”,”GP_WARD”:”KALAU”,”EMAIL”:null,”SPOUCE_NAME_ENG”:null,”IS_RURAL”:”Rural”,”DISTRICT”:”Jodhpur”,”EDUCATION_DESC_ENG”:”10 Pass”,”ACC_NO”:null,”ADDRESS”:”Kalau Kalau Shergarh Jodhpur Rajasthan “,”INCOME_DESC_ENG”:null,”BANK_NAME”:null,”LAND_MARK_ENG”:null,”RATION_CARD_NO”:”00036″,”NAME_ENG”:”neelam “,”MOBILE”:null,”GENDER”:”Female”,”FATHER_NAME_ENG”:”kishana ram “,”FAX_NO”:null,”BLOCK_CITY”:”Shergarh”},
{“CATEGORY_DESC_ENG”:”SC”,”STATE”:”Rajasthan”,”MOTHER_NAME_ENG”:”sita”,”HOUSE_NUMBER_ENG”:null,”RELATION_ENG”:”Son”,”DOB”:”13/11/2006″,”MEMBER_AADHAR_ID”:null,”ECONOMIC_GROUP”:”APL”,”BUILDING_NO_ENG”:null,”BHAMASHAH_ID”:”1428-WKMY-25373″,”STREET_NAME_ENG”:null,”IFSC_CODE”:null,”M_ID”:”2676699″,”FAMILYIDNO”:”WDYYYGG”,”PIN_CODE”:”342021″,”LANDLINE_NO”:null,”VILLAGE_NAME”:”Kalau”,”GP_WARD”:”KALAU”,”EMAIL”:null,”SPOUCE_NAME_ENG”:null,”IS_RURAL”:”Rural”,”DISTRICT”:”Jodhpur”,”EDUCATION_DESC_ENG”:”5 Pass”,”ACC_NO”:null,”ADDRESS”:”Kalau Kalau Shergarh Jodhpur Rajasthan “,”INCOME_DESC_ENG”:null,”BANK_NAME”:null,”LAND_MARK_ENG”:null,”RATION_CARD_NO”:”00036″,”NAME_ENG”:”punam”,”MOBILE”:null,”GENDER”:”Male”,”FATHER_NAME_ENG”:”kishana ram “,”FAX_NO”:null,”BLOCK_CITY”:”Shergarh”}]}
#4 by Perry on March 18, 2016 - 5:23 am
Quote
I really liked this example and was the first one that got working without much headache. However many json has subobjects and I needed to view tables within the tables essentially. So a quick little mod in the looping of the entries I detect if its another object and recursively call CreateTableView. This works but I found with very large data sets I just get a blank screen.
for (var index in array[i]) {
if(typeof array[i][index] == ‘object’) {
str += ” + CreateTableView(array[i][index], “lightPro”, true) + ”;
}else{
str += ” + array[i][index] + ”;
}
}
#5 by Zach on March 22, 2016 - 11:43 pm
Quote
Great idea, just posted an update that does a little extra to support nested objects and arrays.
#6 by Yusadolat on March 7, 2016 - 7:21 am
Quote
Here is the dataset
[
{ “contactor”:”Baid Commpany Limited”,”projects”:”45″,”project_amount”:”N1,470088″, “amount_paid”:”678790″, “variation”:”9.2″,”average_amount_paid”:”N1383299.00″,”minimum_amount_paid”:”N23457″,”maximum_amount_paid”:”N4345687″},
{ “contactor”:”The Godfather”,”projects”:”45″,”project_amount”:”197″, “amount_paid”:”511495″, “variation”:”9.2″, “average_amount_paid”:”N1383299.00″,”minimum_amount_paid”:”N3456677″,”maximum_amount_paid”:”N456787″},
{“contactor”:”Uthman Co. Nig Limited”,”projects”:”1″,”project_amount”:”N1,508,960″,”amount_paid”:”N0″,”variation”:”N0″,”average_amount_paid”:”N0.00″,”maximum_amount_paid”:”N0″,”maximum_amount_paid”:”N0″},
{“contactor”:”U.I Ventures Limited,Ibadan”,”projects”:”1″,”project_amount”:”N997,500″,”amount_paid”:”N0″,”variation”:”N0″,”average_amount_paid”:”N0.00″,”minimum_amount_paid”:”N3456677″,”maximum_amount_paid”:”N0″},
{“contactor”:”G.B.O Engineering Nig. Ltd”,”projects”:”1″,”project_amount”:”N6,783,637″,”amount_paid”:”N6,747,829″,”variation”:”N0″,”average_amount_paid”:”N6,747,829.00″,”minimum_amount_paid”:”N6,747,829″,”maximum_amount_paid”:”N6,747,829″},
{“contactor”:”Artmosfair Concept”,”projects”:”1″,”project_amount”:”N900,000″,”amount_paid”:”N0″,”variation”:”N0″,”average_amount_paid”:”N0.00″,”minimum_amount_paid”:”N0″,”maximum_amount_paid”:”N0″},
{“contactor”:”Adedisu production”,”projects”:”1″,”project_amount”:”N1,980,000″,”amount_paid”:”N1,930,500″,”variation”:”N0″,”average_amount_paid”:”N1,930,500.00″,”minimum_amount_paid”:”N1,930,500″,”maximum_amount_paid”:”N1,930,500″},
{“contactor”:”S.S. Ladsom Ltd., Ibadan.”,”projects”:”1″,”project_amount”:”N4,619,357″,”amount_paid”:”N4,252,743″,”variation”:”N0″,”average_amount_paid”:”N4,252,743.00″,”minimum_amount_paid”:”N4,252743″,”maximum_amount_paid”:”N4,252,743″},
{“contactor”:”Gee & Tee Multiglobal”,”projects”:”1″,”project_amount”:”N4,250,000″,”amount_paid”:”N4,250,000″,”variation”:”N0″,”average_amount_paid”:”N4,250,000.00″,”minimum_amount_paid”:”N4,250,000″,”maximum_amount_paid”:”N4,250,000″},
{“contactor”:”Debson Engr. Co. Ltd”,”projects”:”1″,”project_amount”:”N13,153,910″,”amount_paid”:”N13,153,910″,”variation”:”N0″,”average_amount_paid”:”N13,153,910.00″,”minimum_amount_paid”:”N13,153,910″,”maximum_amount_paid”:”N13,153,910″},
{“contactor”:”Cobil Global Services Ltd”,”projects”:”1″,”project_amount”:”N4,143,158″,”amount_paid”:”N4,143,158″,”variation”:”N0″,”average_amount_paid”:”N4,143,158.00″,”minimum_amount_paid”:”N4,143,158″,”maximum_amount_paid”:”N4,143,158″}
]
#7 by Zach on March 10, 2016 - 11:38 pm
Quote
Your data is working perfect, here is a quick jsFiddle of the code being using with jQuery 2.2.1. Your code above was pasted in with non standard double quotes ”:” versus
":"
. This will cause issues, but it might have been caused by the browser.#8 by Yusadolat on March 7, 2016 - 7:19 am
Quote
Hi zach please kindly help me out my data was not display is just loading data
#9 by uma r on January 4, 2016 - 10:16 pm
Quote
how to show this one it returns json obj …any help please as I am just a beginner, but want to your method
json file
{“response_code”:”success”,”formatted_data”:”DomainName”:”TUTORIALIZED.COM”,”RegistrarWHOISServer”:””,”LastupdateofWHOISdatabase”:””,”RegistrarURL”:”http:\/\/www.godaddy.com”,”RegistrantName”:”Boykin”,”RegistrantOrganization”:”DevShed, LLC”,”NameServer”:”NS54.DOMAINCONTROL.COM”,”DNSSEC”:”unsigned”},”raw_data”:”\n\nDomain Name: TUTORIALIZED.COM\nRegistrar URL: http:\/
\/www.godaddy.com\nRegistrant Name: Jim Boykin\norganization: DevShed, LLC\nName Server: NS53.DOMAINCONTROL.COM\nName Server:
NS54.DOMAINCONTROL.COM\nDNSSEC: unsigned\n”}
code
$(document).ready(function() {
$.ajax({
type: “POST”,
url: “new.json”,
data: “{search : post_string}”,
success: function(res) {
$(‘#Results’).append(CreateDetailView(res)).fadeIn();
}
});
$(‘#DynamicGridLoading’).hide();
})
#10 by Zach on February 4, 2016 - 5:15 pm
Quote
Your issue is your JSON format seems invalid; missing “{” after formatted_data. Once you change this, you can see your data is valid. Once you have that data, you can then decide with element you want to show formatted/raw, and just select that one element in the ajax return block (eg. results = json.parse(res); results[0] can then be passed to the table function).
{
"response_code": "success",
"formatted_data": {
"DomainName": "TUTORIALIZED.COM",
"RegistrarWHOISServer": "",
"LastupdateofWHOISdatabase": "",
"RegistrarURL": "http://www.godaddy.com",
"RegistrantName": "Boykin",
"RegistrantOrganization": "DevShed, LLC",
"NameServer": "NS54.DOMAINCONTROL.COM",
"DNSSEC": "unsigned"
},
"raw_data": "\n\nDomain Name: TUTORIALIZED.COM\nRegistrar URL: http://www.godaddy.com\nRegistrant Name: Jim Boykin\norganization: DevShed, LLC\nName Server: NS53.DOMAINCONTROL.COM\nName Server:NS54.DOMAINCONTROL.COM\nDNSSEC: unsigned\n"
}
#11 by Chemji on July 6, 2015 - 3:32 am
Quote
Thank you indeed. I was working on a json data retrieved through a function and had used ajax to fetch to my html. It was hard to decode it since its in a function but now, I found away through the example you gave above and placing it dynamically into the table regardless of the number of columns…kudos!.
#12 by Nick on July 28, 2014 - 8:17 am
Quote
thank you for the quick responce sorry if i dident make myself very clear. im trying to make it so that i can render the whole json data and view all the contents. curently it will just make one table give me the title field_ds_personal_details and a value of [object Object]. idealy in the value cell it would create another table containing that json data ending up with multyple tables.
field_ds_personal_details (table 1 cell 1)
instance_0 (new table(2) created in table 1 cell 2)
field_personal_faname (new table(3) created in table 2 cell 2)
value:Doe (new table(4) created in table 3 cell 2)
field_personal_fname (table 3 row 2)
vale: John( new table (5) created in table 3 row 2 cell 2)
( i may have my rows and cells mixed up a bit there but that should only effect the orientation and still explain it a bit better)
i experimented with editing the json.htm table.js file specficly
str += ” + array[i][index] + ”;
to make it check for an array or object and if there was one to run the generate table function again with that data to make a table in the cell. this did work for a randomly generated json file i got online but for my data it just gives me 1 table title field_ds_personal_details and the value cell being empty.
#13 by Zach on July 28, 2014 - 8:37 am
Quote
Your solutions sounds right, that’s exactly what I would do… I suggest putting a break point on the line of code where it tries to render the inner table (inside your IF statement), to see what the variable looks like. This is pretty easy with Firebug for FF, just open the window, enable script debugging, and put a breakpoint on the line. When the line is executed, you’ll be able to inspect the variables and see what’s breaking.
#14 by Nick on July 28, 2014 - 1:56 am
Quote
Hi Zach i realise this is a 4 year old post but you replied to a coment earler this year so i thought id try as well. i have some nested data in my json and it appears in the table as [object Object], [object Object] i was hopeing you could give me some help sorting this out as im haveing some trouble ( im prity new to all this not much prior knoladge). my json data is this:
[{“field_ds_personal_details”:{“instance_0”:{“field_personal_faname”:{“value”:”Doe”},”field_personal_fname”:{“value”:”John”},”field_personal_gender”:{“value”:”Male”},”field_personal_maname”:{“value”:””},”field_personal_mname”:{“value”:””},”field_personal_nickname”:{“value”:””},”field_personal_suffix”:{“value”:””},”field_personal_title”:{“value”:”Mr”},”field_personal_mobile_phone”:{“value”:”07430 296249″},”field_personal_work_phone”:{“value”:””},”field_personal_marital_status”:{“value”:”- Select -“},”field_personal_number_children”:{“value”:””},”field_personal_home_phone”:{“value”:”01999017535″},”field_personal_email_address”:{“value”:””}}}}]
thank you very much
#15 by Zach on July 28, 2014 - 7:37 am
Quote
What do you want/expect to happen with the object posted in your example. If you want to render the inner object (“field_ds_personal_details”), just pass it to the table function. I’m not sure what your expecting as your end results, so I’m not sure where to point you. So for example, if your $.ajax() method returned “results”, you could call
$('#resultsTable').append(CreateeTableViews(results.fields_ds_personal_details));
#16 by rfribeiro85 on May 9, 2014 - 3:54 am
Quote
Hi Zach,
I’ve been struggling with this for many many hours!
I’m not a developer, but, i have this need to get json data from my systems into a fancy table (and here’s your great tutorial)
I can make it work if i affect the json1 variable with this :
var json1 = { “d”: [{ host: “C010B0059001”, service_description: “Internet Explorer”, svc_plugin_output: “CRITICAL – Socket timeout after 10 seconds”, svc_state_age: “2014-02-19 17:53:12”, svc_check_age: “27 min”, service_icons: “”, perfometer: “”, svc_custom_notes: “”}] }
But, i want it to feed from a json file as this :
$(document).ready(function() {
$.ajax({
type: “POST”,
url: “new.json”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
data: “{}”,
success: function(res) {
$(‘#Results’).append(CreateDetailView(res)).fadeIn();
}
});
$(‘#DynamicGridLoading’).hide();
})
And my json file looks like :
{ “d”: [{ host: “C010B0059001”, service_description: “Internet Explorer”, svc_plugin_output: “CRITICAL – Socket timeout after 10 seconds”, svc_state_age: “2014-02-19 17:53:12”, svc_check_age: “27 min”, service_icons: “”, perfometer: “”, svc_custom_notes: “”}] }
And nothing comes up :X
Please remind that i’m not a developer, so sorry if i’m making stupid questions! :$
#17 by Zach on May 9, 2014 - 10:07 am
Quote
Your object data is wrapped in property “d”, you need to change “res” to “res.d” and it should work.