JavaScript Display Object

How to display a JavaScript object?

How to display a JavaScript object? [object Object].

Example

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

Try It Yourself

Some common solutions to display JavaScript objects are:

  • Displaying object properties by name
  • Looping to display object properties
  • Displaying object using Object.values()
  • Displaying object using JSON.stringify()

Displaying object properties

Object properties can be displayed as strings:

Example

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

Try It Yourself

Displaying the object in the loop

Object properties can be collected in the loop:

Example

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

Try It Yourself

You must use person[x] in the loop.

person.x will not work (because x is a variable).

Using Object.values()

By using Object.values(), any JavaScript object can be converted to an array:

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray Now it is a JavaScript array, which can be displayed:

Example

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Try It Yourself

Since 2016, all major browsers have supported Object.values().

Chrome IE Firefox Safari Opera
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

Using JSON.stringify()

Any JavaScript object can use the JavaScript function JSON.stringify() Stringify (convert to string):

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString Now it is a JavaScript string, which can be displayed:

Example

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Try It Yourself

The result will be a string that follows the JSON notation:

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() Included in JavaScript, all mainstream browsers support it.

Date stringification

JSON.stringify Convert date to string:

Example

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Try It Yourself

Function Stringification

JSON.stringify Functions will not be stringified:

Example

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Try It Yourself

If the function is converted to a string before stringification, it can be "fixed".

Example

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Try It Yourself

Array Stringification

You can also stringify a JavaScript array:

Example

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

Try It Yourself

The result will be a string that follows the JSON notation:

["Bill","Steve","Elon","David"]