JavaScript Display Objects

When we try to print JavaScript objects on the web page it usually prints [object Object] instead of the name:value pairs. So, we generally use the console.log() statement to print the object values in the browser console, which you can check by Inspecting the page.

Example

<script>
    var man = {
        name: "Rahul",
        age: 20,
        height: "6(ft)"
    }
    document.write(man);    //  [object Object]
    console.log(man);     //{name: "Rahul", age: 20, height: "6(ft)"}
</script>

Although the console.log() will print the complete object itself, but it won't be displayed on the web-browser. Here are some of the most common tricks we can use to display the object on the web browser.

1. Display objects using their properties.
2. Display the object values using in Loop
3. Display the Object using the object.values() method.
4. Display the object using JSON.stringify()

Displaying Object Using their Properties

The most straightforward way to output the object data on the web-page by accessing the individual property. We can either use the dot . operator or square bracket to access the object property.

Example

<script>
    var man = {
        name: "Rahul",
        age: 20,
        height: "6(ft)"
    }

    document.write(man.name + ", "+ man.age + ", " + man.height)   
</script>

Rahul, 20, 6(ft)

Display Object using in Loop

JavaScript provides a in loop structure that is used to iterate over the property names of the object. And using the in loop we can access all the elements of the object in one go.

Example

<script>
    var man = {
        name: "Rahul",
        age: 20,
        height: "6(ft)"
    }

    for(property in man)
    {
        document.write(man[property] +" ") 
    }  
</script>

Output

Rahul 20 6(ft)

The for...in loop iterate over the object property names as a string. So object.property will nat work we need to use it as object[property]

Display Object using Object.values() method

The JavaScript comes with a predefined Object class values method, that can be used to return all the object values in an array format.

Example

<script>
    var man = {
        name: "Rahul",
        age: 20,
        height: "6(ft)"
    }
    value_array = Object.values(man);
    document.write(value_array)
</script>

Rahul,20,6(ft)

Display Obect using JSON.stringify()

JSON stands for JavaScript Object Notation, and it represents the overall structure of the JavaScrtip object. JavaScript comes with the JSON module, which supports stringify method, and it can convert a JavaScript object to JSON string.

Example

<script>
    var man = {
        name: "Rahul",
        age: 20,
        height: "6(ft)"
    }
    obj_string = JSON.stringify(man);
    document.write(obj_string)
</script>

{"name":"Rahul","age":20,"height":"6(ft)"}

Summary

• The object variable is printed as [object Object] on the web-browser.
• for...in loop can be used to iterate over the object properties.
• The Object.values() method returns an array of Object values.
• JSON.stringify() method converts the object into a JSON string.