Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to show more detail about an object

Objects

How to show more detail about an object

by  BillyRayPreachersSon  Posted    (Edited  )
Normally when you alert a generic object in JavaScript, browsers do not give you wery much information. Values like "[Object]" are all too common, and not very informative.

The code below shows one way of resolving this. By adding a "toStringEnhanced" method to every object, it allows to you customise how you see object infotmation. It also handles objects within objects easily by using recursion.

Code: 
<html>
<head>
    <script type="text/javascript">
    <!--

        // define basic object structure for a person, containing 2 strings and a date object
        function personDetails(personName, personEmail, personDOB) {
            this.name = personName;
            this.email = personEmail;
            this.DOB = personDOB;
        }

        // define object that will hold
        var peopleDetails = { person:[], someOtherStuffMightGoHere: 123 };

        // initialise data
        peopleDetails.person[0] = new personDetails('Fred Bloggs', 'fred@bloggs.com', new Date('01/01/1964'));
        peopleDetails.person[1] = new personDetails('Mike Raphone', 'mike@raphone.com', new Date('02/06/1968'));
        peopleDetails.person[2] = new personDetails('Ray Zin', 'ray@zin.com', new Date('09/03/1972'));

        var numPeople = peopleDetails.length;
        for (var loop=0; loop<numPeople; loop++) {
        }

        // add a more powerful method than "toString" to an object
        Object.prototype.toStringEnhanced = objToString;

        function objToString() {
            var s = '';

            for (properties in this) {
                var currentProperty = this[properties];
                var propertyType = (typeof(currentProperty)).toLowerCase();


                if (propertyType == 'function') {
                    // s += ' A function: ' + currentProperty + '\n';    // skip detail for methods. replace this line with "s += currentProperty;" to remove restriction
                    continue;
                }

                if (currentProperty.constructor == new Date().constructor) {
                    // for date objects, use default "toString()" method
                    s += properties + ': A date: ';
                    s += currentProperty;
                    s += '\n';
                } else if (currentProperty.constructor == [].constructor) {
                    // for array objects, use different description
                    s += properties + ': An array:\n\n';
                    s += currentProperty.toStringEnhanced();
                    s += '\n';
                } else if (propertyType == 'object') {
                    s += properties + ': ';
                    s += currentProperty.toStringEnhanced();
                    s += '\n';
                } else {
                    s += properties + ': ';
                    s += currentProperty;
                    s += '\n';
                }
            }

            return(s);
        }

        // show object detail with regular "toString()" method
        alert(peopleDetails);

        // show object detail with enhanced "toString()" method
        alert(peopleDetails.toStringEnhanced());

    //-->
    </script>
</head>

<body>
</body>
</html>

The code isn't as comprehensive as it could be (for example, indenting sub-levels, etc), but it gives a good idea of how to use recursion, and how to output different results based on the property / method type.

Dan

[link http://www.coedit.co.uk/][color #00486F]Coedit Limited[/color][/link][color #000000] - Delivering standards compliant, accessible web solutions[/color]

[tt]Dan's Page [blue]@[/blue] Code Couch
http://www.codecouch.com/dan/[/tt]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top