William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

3 ways to print javascript Object

3 ways to print javascript Object

It is always helpful to print Javascript Objects on screen. Here I use ‘click’ event as object, to use 3 ways to print out. Actually any object can simulate.

  1. print objects(associate array) in a HTMl div.
  2. print objects in console
  3. alert – popup window

The browsers work differently:

  • For FF, all 3 ways work.
  • For Chrome, 1,2 works.
  • For IE, 1 works.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Events</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.4.2");
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#div1').bind('click', function(e) {
 $('#div1').append(e.type).css('color', 'red');
 // print in screen.
 var output = '';
 for (property in e) {
  output += property + ': ' + e[property]+"; <br>\n";
 }
 $('#div2').append(output);
 // print in FF
 console.log(e);
 // alert.
 alert(e.toSource());
})
});
</script>
</head>
<body>
<div id="div1">DIV event: </div>
<div id="div2"></div>
</body>
</html>

So FF’s console is the best solution for debug purpose. A useful article can be found at: http://stackoverflow.com/questions/957537/how-can-i-print-a-javascript-object

Advertisements

2 responses to “3 ways to print javascript Object

  1. powercashadvance.com 10/27/2011 at 8:03 am

    I couldn’t have asked for a more rewarding blog. You’re ever present to give excellent guidance, going instantly to the point for simple understanding of your target audience. You’re undeniably a terrific pro in this matter. Thanks a lot for remaining there for people like me.

  2. Jorge 04/27/2012 at 2:45 am

    Great post! Also found this helpful in instructing how to print javascript objects:

    http://www.programmerinterview.com/index.php/javascript/how-to-print-a-javascript-object/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: