Displaying objects in html format

I'm trying to write an object explorer that shows the user the properties and values of an object. My idea is that the will be able to drill down to see objects within objects, click on hyperlinks to examine the methods' source code and otherwise see the properties values.

Here's what I've got so far (jsFiddle).

Q: Help! I don't know开发者_C百科 what I'm doing! One thing I noticed is that I'm apparently not getting any properties where hasOwnProperty is true. Another thing is I need the function to be recursive. Another is: I think I remember reading somewhere of a JavaScript function that can get the text of a JavaScript function.

So, to answer your question: "What's the question?" I guess I can say "Can you help me write this generic JavaScript object explorer as possibly a jQuery plugin?"

Your question is quite general. To your two specific points:

In order to make your function recursive, I believe you can simply copy this block of code from your 'bodyLog' function to the place you have commented your recursion. You will want to add one to 'level' as you pass it down to your recursive call.

// $(obj).each(function(index,Element) { // EDIT shouldn't need this iteration, you're inside the loop
    result += showObjectsMethodsAndValues(Element,level+1,true);
    result += showObjectsMethodsAndValues(Element,level+1,false);
//});

The method that gets the string body of a function is simply calling '.toString()' on the method object. So if you do:

var myFun = function(a, b) {
   return a+b;
};

alert(myFun.toString());

You will see the body of the function printed out. For built-in objects you will probably see "[native code]" as the body of the function, rather than real javascript code.

The reason you aren't seeing any hasOwnProperty properties is that I doubt the jQuery object has any. All of it's properties likely live in it's prototype object. Try this:

var myObj = {foo: 1, bar: 2};
myObj.prototype = {baz: 3};

Then call your function on myObj. Foo and bar should come back with hasOwnProperty true, baz will return false. I believe all of jQuery's properties live in it's prototype object, so they will all return false.

http://www.netgrow.com.au/files/javascript_dump.cfm is a good candidate.