Javascript Tree Traversal

Can you demonstrate tree traversal in Javascript on this page?
JCW2Asked:
Who is Participating?
 
ProculopsisConnect With a Mentor Commented:

Do you mean something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26783203.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function () {

  var tree = {
    myNull: null,
    myBoolean: true,
    myNumber: 3.1415926535897932,
    myString: "Hello World!",
    myArray: [ null, true, 3.1415926535897932, "Hello World!" ],
    myObject: { myNull: null, myBoolean: true, myNumber: 3.1415926535897932, myString: "Hello World!", myArray: [ null, true, 3.1415926535897932, "Hello World!" ] }
  };

  $("#result").text( tree.traverse() );

});

Object.prototype.traverse = function(){
  var result = "";
  var depth = (arguments.length != 0)? arguments[0] + 1 : 0;
  var level = "";
  while ( level.length != depth * 2 ) level += "  ";

  switch ( type( this ) ) {
    case "Boolean": 
    case "Number": 
      result += this;
    break;

    case "String":
      result += "\"" + this + "\"";
    break;

    case "Array":
      resolve( this, "[", "]", false );
    break;

    case "Object":
      resolve( this, "{", "}", true );
    break;
  }

  return result;

  function resolve( value, prefix, suffix, label ) {
    result += prefix + "\r";
    for ( entry in value )
      if( isSimple( value[entry] ) ){

      inset( "  " );
      if ( label ) result += "\"" + entry + "\": ";
      result += (value[entry] != null)? value[entry].traverse( depth ) : "null";
      result += ",\r";
    }
    result = result.replace( /,\r$/m, "\r" );
    inset( suffix );
  }

  function type( probe ) {
    var theType = "Null";
    if ( probe != null ) theType = probe.constructor.toString().replace( /(?:\n|\r|.)*?[ ]{1}([^\(]+)(?:\n|\r|.)*/m, "$1" );
    return theType;
  }

  function isSimple( value ) {
    return "Null,Boolean,Number,String,Array,Object".indexOf( type( value ) ) != -1;
  }

  function inset( value ) {
    result += level + value;
  }

}

</script>
</head>
<body>

<pre id="result">
</pre>

</body>
</html>

Open in new window

0
 
nschaferConnect With a Mentor Commented:
Do you mean making a TreeView in javascript?

If so here is a tutorial I've created on the subject.

http://www.applicationgroup.com/tutorials/treeview/JS_TreeView_Sample.asp

Hope this helps,
Neal.
0
 
JCW2Author Commented:
Thank you for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.