Unable to display JSON data in table form in browser
up vote
-1
down vote
favorite
Based on my generated JSON data I want to dynamically create HTML page and display data in browser. As I can see the data in my console.log but unable to display in browser.
I think my JavaScript function is not working properly e.i function CreateDetailView(objArray, theme, enableHeader)
servlet.java
GsonBuilder builder = new GsonBuilder();
builder.setPrettyPrinting();
Gson gson = builder.create();
//below line generate json data
String content = gson.toJson(metaProperties);
//here i am using servlet to set attribute for
request.setAttribute("jsonOutputContent", content);
In table.jsp file inside script tag in I am fetching the content using getAttribute() method.
table.jsp file
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JSON to HTML Table</title>
<script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script>
<script src="scripts/json.htmTable.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/json.debug.js" type="text/javascript"></script>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//here i am getting the attribute and storing in a variable
var jsonMetaDataProperties = <%= request.getAttribute("jsonOutputContent").toString() %>;
var test = eval(jsonMetaDataProperties);
alert("Test " + test.data.collection[0]["objectid"]);
var json = JSON.parse(JSON.stringify(jsonMetaDataProperties));
var arrObj = ;
arrObj = json;
//below is the methods to display json data in table
$('#DynamicGrid').append(CreateDetailView(arrObj.data.collection, "lightPro", true)).fadeIn();
</script>
</head>
<body>
<form id="form1">
<div id="DynamicGrid">
<div id="DynamicGridLoading">
<img src="image/loading.gif" /><span> Loading Data... </span>
</div>
</div>
</form>
</body>
</html>
json.htmTable.js
// 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) : new Array(objArray);
var keys = "";
for (var a in array) {
keys = Object.keys(array[a]);
}
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;
}
.json file data
`{
"data": {
"type": "properties",
"metadata": ,
"objects": ,
"collection": [
{
"objectid": 1,
"name": "Model",
"properties": {
"Energy Analysis": {
"Energy Settings": ""
},
"Identity Data": {
"Author": "",
"Building Name": "",
"Organization Description": "",
"Organization Name": ""
},
"Other": {
"Client Name": "Owner",
"Project Address": "Enter address here",
"Project Issue Date": "Issue Date",
"Project Name": "Project Name",
"Project Number": "Project Number",
"Project Status": "Project Status"
}
}
},
{
"objectid": 1864,
"name": "Topography"
},
{
"objectid": 1865,
"name": "Surface [105545]",
"properties": {
"Dimensions": {
"Projected Area": "42985.637 m^2",
"Surface Area": "43753.556 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "u003cBy Categoryu003e"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1902,
"name": "Subregion [111931]",
"properties": {
"Dimensions": {
"Projected Area": "3676.626 m^2",
"Surface Area": "3676.632 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "Site - Tarmacadam"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1953,
"name": "Surface [130736]",
"properties": {
"Dimensions": {
"Projected Area": "1759.927 m^2",
"Surface Area": "1759.927 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "u003cBy Categoryu003e"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1954,
"name": "Pads"
},
{
"objectid": 1955,
"name": "Pad"
},
{
"objectid": 1957,
"name": "Pad 1",
"properties": {
"Analytical Properties": {
"Absorptance": "0.100",
"Heat Transfer Coefficient (U)": "0.000 watt / (m^2 kelvin)",
"Roughness": "1",
"Thermal Resistance (R)": "0.000 m^2 kelvin / watt",
"Thermal mass": "0.000 kjoule / kelvin"
},
"Construction": {
"Structure": "",
"Thickness": "300.000 mm"
},
"Graphics": {
"Coarse Scale Fill Color": "0",
"Coarse Scale Fill Pattern": ""
},
"Identity Data": {
"Assembly Code": "",
"Assembly Description": "",
"Cost": "0.000",
"Description": "",
"Keynote": "",
"Manufacturer": "",
"Model": "",
"Type Comments": "",
"Type Image": "",
"Type Mark": "",
"URL": ""
}
}
},`
etc ...
This is very big file so unable to add data....
Please helps its my first project.
Thanks in advance.
javascript java json jsp
edited Nov 22 at 12:52
barbsan
2,1481022
asked Nov 20 at 11:54
Hussain
61
add a comment |
up vote
-1
down vote
favorite
Based on my generated JSON data I want to dynamically create HTML page and display data in browser. As I can see the data in my console.log but unable to display in browser.
I think my JavaScript function is not working properly e.i function CreateDetailView(objArray, theme, enableHeader)
servlet.java
GsonBuilder builder = new GsonBuilder();
builder.setPrettyPrinting();
Gson gson = builder.create();
//below line generate json data
String content = gson.toJson(metaProperties);
//here i am using servlet to set attribute for
request.setAttribute("jsonOutputContent", content);
In table.jsp file inside script tag in I am fetching the content using getAttribute() method.
table.jsp file
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JSON to HTML Table</title>
<script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script>
<script src="scripts/json.htmTable.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/json.debug.js" type="text/javascript"></script>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//here i am getting the attribute and storing in a variable
var jsonMetaDataProperties = <%= request.getAttribute("jsonOutputContent").toString() %>;
var test = eval(jsonMetaDataProperties);
alert("Test " + test.data.collection[0]["objectid"]);
var json = JSON.parse(JSON.stringify(jsonMetaDataProperties));
var arrObj = ;
arrObj = json;
//below is the methods to display json data in table
$('#DynamicGrid').append(CreateDetailView(arrObj.data.collection, "lightPro", true)).fadeIn();
</script>
</head>
<body>
<form id="form1">
<div id="DynamicGrid">
<div id="DynamicGridLoading">
<img src="image/loading.gif" /><span> Loading Data... </span>
</div>
</div>
</form>
</body>
</html>
json.htmTable.js
// 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) : new Array(objArray);
var keys = "";
for (var a in array) {
keys = Object.keys(array[a]);
}
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;
}
.json file data
`{
"data": {
"type": "properties",
"metadata": ,
"objects": ,
"collection": [
{
"objectid": 1,
"name": "Model",
"properties": {
"Energy Analysis": {
"Energy Settings": ""
},
"Identity Data": {
"Author": "",
"Building Name": "",
"Organization Description": "",
"Organization Name": ""
},
"Other": {
"Client Name": "Owner",
"Project Address": "Enter address here",
"Project Issue Date": "Issue Date",
"Project Name": "Project Name",
"Project Number": "Project Number",
"Project Status": "Project Status"
}
}
},
{
"objectid": 1864,
"name": "Topography"
},
{
"objectid": 1865,
"name": "Surface [105545]",
"properties": {
"Dimensions": {
"Projected Area": "42985.637 m^2",
"Surface Area": "43753.556 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "u003cBy Categoryu003e"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1902,
"name": "Subregion [111931]",
"properties": {
"Dimensions": {
"Projected Area": "3676.626 m^2",
"Surface Area": "3676.632 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "Site - Tarmacadam"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1953,
"name": "Surface [130736]",
"properties": {
"Dimensions": {
"Projected Area": "1759.927 m^2",
"Surface Area": "1759.927 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "u003cBy Categoryu003e"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1954,
"name": "Pads"
},
{
"objectid": 1955,
"name": "Pad"
},
{
"objectid": 1957,
"name": "Pad 1",
"properties": {
"Analytical Properties": {
"Absorptance": "0.100",
"Heat Transfer Coefficient (U)": "0.000 watt / (m^2 kelvin)",
"Roughness": "1",
"Thermal Resistance (R)": "0.000 m^2 kelvin / watt",
"Thermal mass": "0.000 kjoule / kelvin"
},
"Construction": {
"Structure": "",
"Thickness": "300.000 mm"
},
"Graphics": {
"Coarse Scale Fill Color": "0",
"Coarse Scale Fill Pattern": ""
},
"Identity Data": {
"Assembly Code": "",
"Assembly Description": "",
"Cost": "0.000",
"Description": "",
"Keynote": "",
"Manufacturer": "",
"Model": "",
"Type Comments": "",
"Type Image": "",
"Type Mark": "",
"URL": ""
}
}
},`
etc ...
This is very big file so unable to add data....
Please helps its my first project.
Thanks in advance.
javascript java json jsp
edited Nov 22 at 12:52
barbsan
2,1481022
asked Nov 20 at 11:54
Hussain
61
1
You've just posted a tonne of code but not actually asked a question. Try and narrow down your specific problem and post just a small piece of example code that shows what your problem is. We can help fix that small piece of code and then you can implement the fix in your own application.
– Archer
Nov 20 at 11:58
1
Please read "How to create a Minimal, Complete, and Verifiable example". Then use the edit link to improve your question (do not add more information via comments). Otherwise we are not able to answer your question and help you.
– GhostCat
Nov 20 at 12:06
To display data in browser we need to keep the method inside function.. $(document).ready(function() { $('#DynamicGridLoading').hide(); $('#DynamicGrid').append(CreateDetailView(test.data.collection, "lightPro", true)).fadeIn(); });
– Hussain
Nov 21 at 6:21
Thanks Sarief for understanding my problem..
– Hussain
Nov 21 at 6:27
@Sarief too much code may be a reason for downvote, read this: idownvotedbecau.se/toomuchcode @Hussain I can't see anyconsole.login this code, you have onealertbut it shows data intestand then you pass data fromjson. Have you seenjson's content? Have you debuggedCreateDetailViewfunction?
– barbsan
Nov 22 at 12:40
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
Based on my generated JSON data I want to dynamically create HTML page and display data in browser. As I can see the data in my console.log but unable to display in browser.
I think my JavaScript function is not working properly e.i function CreateDetailView(objArray, theme, enableHeader)
servlet.java
GsonBuilder builder = new GsonBuilder();
builder.setPrettyPrinting();
Gson gson = builder.create();
//below line generate json data
String content = gson.toJson(metaProperties);
//here i am using servlet to set attribute for
request.setAttribute("jsonOutputContent", content);
In table.jsp file inside script tag in I am fetching the content using getAttribute() method.
table.jsp file
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JSON to HTML Table</title>
<script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script>
<script src="scripts/json.htmTable.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/json.debug.js" type="text/javascript"></script>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//here i am getting the attribute and storing in a variable
var jsonMetaDataProperties = <%= request.getAttribute("jsonOutputContent").toString() %>;
var test = eval(jsonMetaDataProperties);
alert("Test " + test.data.collection[0]["objectid"]);
var json = JSON.parse(JSON.stringify(jsonMetaDataProperties));
var arrObj = ;
arrObj = json;
//below is the methods to display json data in table
$('#DynamicGrid').append(CreateDetailView(arrObj.data.collection, "lightPro", true)).fadeIn();
</script>
</head>
<body>
<form id="form1">
<div id="DynamicGrid">
<div id="DynamicGridLoading">
<img src="image/loading.gif" /><span> Loading Data... </span>
</div>
</div>
</form>
</body>
</html>
json.htmTable.js
// 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) : new Array(objArray);
var keys = "";
for (var a in array) {
keys = Object.keys(array[a]);
}
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;
}
.json file data
`{
"data": {
"type": "properties",
"metadata": ,
"objects": ,
"collection": [
{
"objectid": 1,
"name": "Model",
"properties": {
"Energy Analysis": {
"Energy Settings": ""
},
"Identity Data": {
"Author": "",
"Building Name": "",
"Organization Description": "",
"Organization Name": ""
},
"Other": {
"Client Name": "Owner",
"Project Address": "Enter address here",
"Project Issue Date": "Issue Date",
"Project Name": "Project Name",
"Project Number": "Project Number",
"Project Status": "Project Status"
}
}
},
{
"objectid": 1864,
"name": "Topography"
},
{
"objectid": 1865,
"name": "Surface [105545]",
"properties": {
"Dimensions": {
"Projected Area": "42985.637 m^2",
"Surface Area": "43753.556 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "u003cBy Categoryu003e"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1902,
"name": "Subregion [111931]",
"properties": {
"Dimensions": {
"Projected Area": "3676.626 m^2",
"Surface Area": "3676.632 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "Site - Tarmacadam"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1953,
"name": "Surface [130736]",
"properties": {
"Dimensions": {
"Projected Area": "1759.927 m^2",
"Surface Area": "1759.927 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "u003cBy Categoryu003e"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1954,
"name": "Pads"
},
{
"objectid": 1955,
"name": "Pad"
},
{
"objectid": 1957,
"name": "Pad 1",
"properties": {
"Analytical Properties": {
"Absorptance": "0.100",
"Heat Transfer Coefficient (U)": "0.000 watt / (m^2 kelvin)",
"Roughness": "1",
"Thermal Resistance (R)": "0.000 m^2 kelvin / watt",
"Thermal mass": "0.000 kjoule / kelvin"
},
"Construction": {
"Structure": "",
"Thickness": "300.000 mm"
},
"Graphics": {
"Coarse Scale Fill Color": "0",
"Coarse Scale Fill Pattern": ""
},
"Identity Data": {
"Assembly Code": "",
"Assembly Description": "",
"Cost": "0.000",
"Description": "",
"Keynote": "",
"Manufacturer": "",
"Model": "",
"Type Comments": "",
"Type Image": "",
"Type Mark": "",
"URL": ""
}
}
},`
etc ...
This is very big file so unable to add data....
Please helps its my first project.
Thanks in advance.
javascript java json jsp
edited Nov 22 at 12:52
barbsan
2,1481022
asked Nov 20 at 11:54
Hussain
61
Based on my generated JSON data I want to dynamically create HTML page and display data in browser. As I can see the data in my console.log but unable to display in browser.
I think my JavaScript function is not working properly e.i function CreateDetailView(objArray, theme, enableHeader)
servlet.java
GsonBuilder builder = new GsonBuilder();
builder.setPrettyPrinting();
Gson gson = builder.create();
//below line generate json data
String content = gson.toJson(metaProperties);
//here i am using servlet to set attribute for
request.setAttribute("jsonOutputContent", content);
In table.jsp file inside script tag in I am fetching the content using getAttribute() method.
table.jsp file
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JSON to HTML Table</title>
<script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script>
<script src="scripts/json.htmTable.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/json.debug.js" type="text/javascript"></script>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//here i am getting the attribute and storing in a variable
var jsonMetaDataProperties = <%= request.getAttribute("jsonOutputContent").toString() %>;
var test = eval(jsonMetaDataProperties);
alert("Test " + test.data.collection[0]["objectid"]);
var json = JSON.parse(JSON.stringify(jsonMetaDataProperties));
var arrObj = ;
arrObj = json;
//below is the methods to display json data in table
$('#DynamicGrid').append(CreateDetailView(arrObj.data.collection, "lightPro", true)).fadeIn();
</script>
</head>
<body>
<form id="form1">
<div id="DynamicGrid">
<div id="DynamicGridLoading">
<img src="image/loading.gif" /><span> Loading Data... </span>
</div>
</div>
</form>
</body>
</html>
json.htmTable.js
// 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) : new Array(objArray);
var keys = "";
for (var a in array) {
keys = Object.keys(array[a]);
}
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;
}
.json file data
`{
"data": {
"type": "properties",
"metadata": ,
"objects": ,
"collection": [
{
"objectid": 1,
"name": "Model",
"properties": {
"Energy Analysis": {
"Energy Settings": ""
},
"Identity Data": {
"Author": "",
"Building Name": "",
"Organization Description": "",
"Organization Name": ""
},
"Other": {
"Client Name": "Owner",
"Project Address": "Enter address here",
"Project Issue Date": "Issue Date",
"Project Name": "Project Name",
"Project Number": "Project Number",
"Project Status": "Project Status"
}
}
},
{
"objectid": 1864,
"name": "Topography"
},
{
"objectid": 1865,
"name": "Surface [105545]",
"properties": {
"Dimensions": {
"Projected Area": "42985.637 m^2",
"Surface Area": "43753.556 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "u003cBy Categoryu003e"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1902,
"name": "Subregion [111931]",
"properties": {
"Dimensions": {
"Projected Area": "3676.626 m^2",
"Surface Area": "3676.632 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "Site - Tarmacadam"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1953,
"name": "Surface [130736]",
"properties": {
"Dimensions": {
"Projected Area": "1759.927 m^2",
"Surface Area": "1759.927 m^2"
},
"Identity Data": {
"Comments": "",
"Image": "",
"Mark": "",
"Name": ""
},
"Materials and Finishes": {
"Material": "u003cBy Categoryu003e"
},
"Phasing": {
"Phase Created": "New Construction",
"Phase Demolished": "None"
}
}
},
{
"objectid": 1954,
"name": "Pads"
},
{
"objectid": 1955,
"name": "Pad"
},
{
"objectid": 1957,
"name": "Pad 1",
"properties": {
"Analytical Properties": {
"Absorptance": "0.100",
"Heat Transfer Coefficient (U)": "0.000 watt / (m^2 kelvin)",
"Roughness": "1",
"Thermal Resistance (R)": "0.000 m^2 kelvin / watt",
"Thermal mass": "0.000 kjoule / kelvin"
},
"Construction": {
"Structure": "",
"Thickness": "300.000 mm"
},
"Graphics": {
"Coarse Scale Fill Color": "0",
"Coarse Scale Fill Pattern": ""
},
"Identity Data": {
"Assembly Code": "",
"Assembly Description": "",
"Cost": "0.000",
"Description": "",
"Keynote": "",
"Manufacturer": "",
"Model": "",
"Type Comments": "",
"Type Image": "",
"Type Mark": "",
"URL": ""
}
}
},`
etc ...
This is very big file so unable to add data....
Please helps its my first project.
Thanks in advance.
javascript java json jsp
javascript java json jsp
edited Nov 22 at 12:52
barbsan
2,1481022
asked Nov 20 at 11:54
Hussain
61
edited Nov 22 at 12:52
barbsan
2,1481022
asked Nov 20 at 11:54
Hussain
61
edited Nov 22 at 12:52
barbsan
2,1481022
edited Nov 22 at 12:52
barbsan
2,1481022
edited Nov 22 at 12:52
barbsan
2,1481022
2,1481022
asked Nov 20 at 11:54
Hussain
61
asked Nov 20 at 11:54
Hussain
61
asked Nov 20 at 11:54
Hussain
61
61
1
You've just posted a tonne of code but not actually asked a question. Try and narrow down your specific problem and post just a small piece of example code that shows what your problem is. We can help fix that small piece of code and then you can implement the fix in your own application.
– Archer
Nov 20 at 11:58
1
Please read "How to create a Minimal, Complete, and Verifiable example". Then use the edit link to improve your question (do not add more information via comments). Otherwise we are not able to answer your question and help you.
– GhostCat
Nov 20 at 12:06
To display data in browser we need to keep the method inside function.. $(document).ready(function() { $('#DynamicGridLoading').hide(); $('#DynamicGrid').append(CreateDetailView(test.data.collection, "lightPro", true)).fadeIn(); });
– Hussain
Nov 21 at 6:21
Thanks Sarief for understanding my problem..
– Hussain
Nov 21 at 6:27
@Sarief too much code may be a reason for downvote, read this: idownvotedbecau.se/toomuchcode @Hussain I can't see anyconsole.login this code, you have onealertbut it shows data intestand then you pass data fromjson. Have you seenjson's content? Have you debuggedCreateDetailViewfunction?
– barbsan
Nov 22 at 12:40
add a comment |
1
You've just posted a tonne of code but not actually asked a question. Try and narrow down your specific problem and post just a small piece of example code that shows what your problem is. We can help fix that small piece of code and then you can implement the fix in your own application.
– Archer
Nov 20 at 11:58
1
Please read "How to create a Minimal, Complete, and Verifiable example". Then use the edit link to improve your question (do not add more information via comments). Otherwise we are not able to answer your question and help you.
– GhostCat
Nov 20 at 12:06
To display data in browser we need to keep the method inside function.. $(document).ready(function() { $('#DynamicGridLoading').hide(); $('#DynamicGrid').append(CreateDetailView(test.data.collection, "lightPro", true)).fadeIn(); });
– Hussain
Nov 21 at 6:21
Thanks Sarief for understanding my problem..
– Hussain
Nov 21 at 6:27
@Sarief too much code may be a reason for downvote, read this: idownvotedbecau.se/toomuchcode @Hussain I can't see anyconsole.login this code, you have onealertbut it shows data intestand then you pass data fromjson. Have you seenjson's content? Have you debuggedCreateDetailViewfunction?
– barbsan
Nov 22 at 12:40
1
1
You've just posted a tonne of code but not actually asked a question. Try and narrow down your specific problem and post just a small piece of example code that shows what your problem is. We can help fix that small piece of code and then you can implement the fix in your own application.
– Archer
Nov 20 at 11:58
You've just posted a tonne of code but not actually asked a question. Try and narrow down your specific problem and post just a small piece of example code that shows what your problem is. We can help fix that small piece of code and then you can implement the fix in your own application.
– Archer
Nov 20 at 11:58
1
1
Please read "How to create a Minimal, Complete, and Verifiable example". Then use the edit link to improve your question (do not add more information via comments). Otherwise we are not able to answer your question and help you.
– GhostCat
Nov 20 at 12:06
Please read "How to create a Minimal, Complete, and Verifiable example". Then use the edit link to improve your question (do not add more information via comments). Otherwise we are not able to answer your question and help you.
– GhostCat
Nov 20 at 12:06
To display data in browser we need to keep the method inside function.. $(document).ready(function() { $('#DynamicGridLoading').hide(); $('#DynamicGrid').append(CreateDetailView(test.data.collection, "lightPro", true)).fadeIn(); });
– Hussain
Nov 21 at 6:21
To display data in browser we need to keep the method inside function.. $(document).ready(function() { $('#DynamicGridLoading').hide(); $('#DynamicGrid').append(CreateDetailView(test.data.collection, "lightPro", true)).fadeIn(); });
– Hussain
Nov 21 at 6:21
Thanks Sarief for understanding my problem..
– Hussain
Nov 21 at 6:27
Thanks Sarief for understanding my problem..
– Hussain
Nov 21 at 6:27
@Sarief too much code may be a reason for downvote, read this: idownvotedbecau.se/toomuchcode @Hussain I can't see any
console.log in this code, you have one alert but it shows data in test and then you pass data from json. Have you seen json's content? Have you debugged CreateDetailView function?– barbsan
Nov 22 at 12:40
@Sarief too much code may be a reason for downvote, read this: idownvotedbecau.se/toomuchcode @Hussain I can't see any
console.log in this code, you have one alert but it shows data in test and then you pass data from json. Have you seen json's content? Have you debugged CreateDetailView function?– barbsan
Nov 22 at 12:40
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392455%2funable-to-display-json-data-in-table-form-in-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You've just posted a tonne of code but not actually asked a question. Try and narrow down your specific problem and post just a small piece of example code that shows what your problem is. We can help fix that small piece of code and then you can implement the fix in your own application.
– Archer
Nov 20 at 11:58
1
Please read "How to create a Minimal, Complete, and Verifiable example". Then use the edit link to improve your question (do not add more information via comments). Otherwise we are not able to answer your question and help you.
– GhostCat
Nov 20 at 12:06
To display data in browser we need to keep the method inside function.. $(document).ready(function() { $('#DynamicGridLoading').hide(); $('#DynamicGrid').append(CreateDetailView(test.data.collection, "lightPro", true)).fadeIn(); });
– Hussain
Nov 21 at 6:21
Thanks Sarief for understanding my problem..
– Hussain
Nov 21 at 6:27
@Sarief too much code may be a reason for downvote, read this: idownvotedbecau.se/toomuchcode @Hussain I can't see any
console.login this code, you have onealertbut it shows data intestand then you pass data fromjson. Have you seenjson's content? Have you debuggedCreateDetailViewfunction?– barbsan
Nov 22 at 12:40