How To Display JavaScript Objects

While primitives in JavaScript are values themselves, everything else, including arrays and functions, are objects. Understanding how to leverage objects in the Document Object Model (DOM) is vital for effective web development.

This is a guide on different methods of displaying Objects when working with the DOM.

---

Displaying a JavaScript Object will output [object Object] by default:

const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bangalore"  
};

document.getElementById("demo").innnerHTML = mySelf; //[object Object]

This can however be maneuvered and solved with a couple of workarounds:

1. Displaying Object properties by name
2. Displaying Object Properties in a Loop
3. Displaying Object using Object.values()
4. Displaying Object using Object.entries()
5. Displaying Object using JSON.stringify()

Display the Object Properties

Object properties can be displayed as a string:

// create object
const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bangalore"  
};

// display properties
document.getElementById("demo").innerHTML = mySelf.name + ", " + mySelf.age + ", " + mySelf.city;

Display Object Properties in a Loop

Object properties can also be collected in a loop.
Here, we use an expression(x):

// Create an Object
const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bangalore"  
};

// Build a Text
let text = "";
for (let x in mySelf) {  
    text += mySelf[x] + " ";
};

// Display the Text
document.getElementById("demo").innerHTML = text;

NOTE: You must use mySelf[x] in the loop.
mySelf.x will not work since x is the loop variable.

Display using Object.values()

Objects.values() creates an array from the properties' values.

const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bangalore"  
};

// create array
const myArray = Object.values(mySelf);

// display the array using DOM
document.getElementById("demo").innerHTML = myArray;

Display using Object.entries()

Using Object.entries() simplifies using objects in loops:

const pens = {Blue:20, Black:22, Red:10};

let text = "";

for (let [pen, value] of Object.entries(pens)) {  
    text += fruit + ": " + value + "<br>";
}

//display the count of each pen color
document.getElementById("demo").innerHTML = text;

Display using JSON.stringify()

You can convert JavaScript objects into a string with the JSON method JSON.stringify()
This method is included in JavaScript and is also supported in most browsers, at least all the major ones.

const mySelf = {  
    name: "Joe",  
    age: 21,  
    city: "Bengaluru"
};

// use JSON.stringify() method
let myString = JSON.stringify(mySelf);

// display the output
document.getElementByID("demo").innerHTML = myString;

This method will output a string a string written in JSON notation:

{"name":"Joe", "age":21, "city":"Bangalore"}

---

In summary, effectively displaying JavaScript objects in the DOM is crucial for dynamic web development.

By utilizing techniques such as accessing properties by name, iterating through properties, or using Object.values() and Object.entries(), you can present object data meaningfully.

Understanding these methods enhances user experience and showcases JavaScript's versatility in web applications. Mastering these techniques empowers you as a developer to create engaging and dynamic web content.

Have fun learning 😉

This is a cross-post from my original blog site.

Comments

[Jon Randy 🎖️]

You can get a better formatted string from JSON.stringify by making use of the space parameter - you can put an integer there to specifiy the size of indents that should be used:

const a = { a: 1, b: {c: 3, a: 2}, d: 6, e: 7}
console.log(JSON.stringify(a, undefined, 2))

{
  "a": 1,
  "b": {
    "c": 3,
    "a": 2
  },
  "d": 6,
  "e": 7
}

As you can see, line breaks are also inserted when this parameter is used.

[Joseph Ochego]

Thank you @jonrandy This is a great addition, giving a much better formtted output.
I guess we can also use null as the replacer for the same output, right?

[Joseph Ochego]

Syntax for JSON.Stringify() from mdn:

JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

[Lotfi Jebali]

Thanks for sharing

[Joseph Ochego]

Thank you @lotfijb. I hope it helped
Stay tuned for more 🙂