JavaScript Display Objects


How to Display JavaScript Objects?

Displaying a JavaScript object will output [object Object].

Example

var person = {name:"John", age:30, city:"New York"};

document.getElementById("demo").innerHTML = person;

Some common solutions to display JavaScript objects are:

  • Displaying the Object Properties by name
  • Displaying the Object Properties in a Loop
  • Displaying the Object using Object.values()
  • Displaying the Object using JSON.stringify()

Displaying Object Properties

The properties of an object can be displayed as a string:

Example

var person = {name:"John", age:30, city:"New York"};

document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

Example -

Displaying the Object in a Loop

The properties of an object can be collected in a loop:

Example

var x, txt = "";
var person = {name:"John", age:30, city:"New York"};

for (x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;

Using Object.values()

Any JavaScript object can be converted to an array using Object.values():

var person = {name:"John", age:30, city:"New York"};

var myArray = Object.values(person);

myArray is now a JavaScript array, ready to be displayed:

Example

var person = {name:"John", age:50, city:"New York"};

var myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Example -

Stringify Functions

JSON.stringify will not stringify functions:

Example

var person = {name:"John", age:function () {return 30;}};

var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

This can be "fixed" if you convert the functions into strings before stringifying.

Example

var person = {name:"John", age:function () {return 30;}};
person.age = person.age.toString();

var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Example -