?
Solved

Show the JSON object into a tabular data

Posted on 2011-02-23
8
Medium Priority
?
495 Views
Last Modified: 2013-11-08
How to format this JSON format returned thru Java Object into an HTML table.

{
  "transactions":
  [
    {
      "error": "",
      "ctrNum1": "123456789",
      "successful": true
    },
    {
      "error": "",
      "dtcControlNumber": "123456790",
      "successful": true
    },
    {
      "error": "",
      "ctrNum2": "123456791",
      "successful": true
    },
    {
      "error": "",
      "ctrNum3": "123456792",
      "successful": true
    },
    {
      "error": "",
      "ctrNum4": "123456793",
      "successful": true
    }
  ]
}
0
Comment
Question by:mahaq
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 34966909
Check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
	var json = {"transactions":[{"error":"","ctrNum1":"123456789","successful":true},{"error":"","dtcControlNumber":"123456790","successful":true},{"error":"","ctrNum2":"123456791","successful":true},{"error":"","ctrNum3":"123456792","successful":true},{"error":"","ctrNum4":"123456793","successful":true}]};
	window.onload = function() {
		
		// create table
		var table = document.createElement("table");
		table.setAttribute("border", "1");

		// create and add the header row
		var transaction = json.transactions[0];
		var row = table.insertRow(table.rows.length);
		for(var j in transaction) {
			var cell = row.insertCell(row.cells.length);
			cell.appendChild(document.createTextNode(j));
		}

		// create the rows of data
		for(var i=0;i<json.transactions.length;i++) {
			var transaction = json.transactions[i];
			var row = table.insertRow(table.rows.length);
			for(var j in transaction) {
				var cell = row.insertCell(row.cells.length);
				cell.appendChild(document.createTextNode(transaction[j]));
			}
		}

		// put the table in the body of the page
		document.getElementsByTagName("body")[0].appendChild(table);

		// if you want to put the table in a div
		// document.getElementById("divId").appendChild(table);
	}
</script>
</head>
<body>
<div id="divId"></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:mahaq
ID: 34966977
How can I do a jquery DOM ready instead of body onload?.

Thanks for the help, looks ok, I'll have to see it on the live environment.



0
 

Author Comment

by:mahaq
ID: 34966980
Adding to it, can this DOM be appended in jquery way.
0
Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

 
LVL 82

Expert Comment

by:leakim971
ID: 34966996
>How can I do a jquery DOM ready instead of body onload?.

line 8 : $(document).ready(function() {
line 37 : });

>Adding to it, can this DOM be appended in jquery way.
Yes :
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34967018
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script language="javascript">
	var json = {"transactions":[{"error":"","ctrNum1":"123456789","successful":true},{"error":"","dtcControlNumber":"123456790","successful":true},{"error":"","ctrNum2":"123456791","successful":true},{"error":"","ctrNum3":"123456792","successful":true},{"error":"","ctrNum4":"123456793","successful":true}]};
	$(document).ready(function() {
		
		// create table
		$("<table border=\"1\"><tr></tr></table>").appendTo("body");
//		$("<table border=\"1\"><tr></tr></table>").appendTo("#divId");

		// create header row
		var transaction = json.transactions[0];
		for(var j in transaction) {
			$("table tr").append("<td>" +  j + "</td>");
		}

		// create body
		for(var i=0;i<json.transactions.length;i++) {
			var transaction = json.transactions[i];
			$("table").append("<tr />");
			for(var j in transaction) {
				$("table tr:eq(" + ($("table tr").length-1) + ")").append("<td>" + transaction[j] + "</td>");
			}
		}

	});
</script>
</head>
<body>
<div id="divId"></div>
</body>
</html>

Open in new window

0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 2000 total points
ID: 34968006

Here's another version to consider:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26843230.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script>

var status = {
  "transactions": 
  [
    {
      "error": "",
      "ctrNum1": "123456789",
      "successful": true
    },
    {
      "error": "",
      "dtcControlNumber": "123456790",
      "successful": true
    },
    {
      "error": "",
      "ctrNum2": "123456791",
      "successful": true
    },
    {
      "error": "",
      "ctrNum3": "123456792",
      "successful": true
    },
    {
      "error": "",
      "ctrNum4": "123456793",
      "successful": true
    }
  ]
};

jQuery(document).ready(function() {

  var row = $("<tr/>");
  for ( var column in status.transactions[0] ) {
    row.append( $("<th/>").html( column ) );
  }
  $("#status").append( row );

  for ( var index in status.transactions ) {
    var row = $("<tr/>");
    for ( var column in status.transactions[index] ) {
      var cell = status.transactions[index][column];
      cell = ( cell.toString() != "" )? cell : " ";
      row.append( $("<td/>").text( cell ) );
    }
    $("#status").append( row );
  }

});

</script>
</head>
<body>

<table id="status" border="1"></table>

</body>
</html>

Open in new window

0
 

Author Comment

by:mahaq
ID: 34973958
Convert this json string and display table thru the java script dynamically instead of DOM based.
It has to be on the fly. Is it possible?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34974901
>It has to be on the fly. Is it possible?

Of course. Just replace the current event $(document).ready(function() {
by the new one, for example a click on a button : $("#myButtonId").click(function() {
or any other event... an other one, callback function : $.get("/path/to/loadJSON.php", function(json) {
0

Featured Post

Major Serverless Shift

Comparison of major players like AWS, Microsoft Azure, IBM Bluemix, and Google Cloud Platform

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question