JavaScript Display Objects

Displaying a JavaScript object will output [object Object].

How to Display JavaScript Objects?

Displaying a JavaScript object will output [object Object].

Example

Example Code

javascript

Try it Yourself

// Create an Object

const person = {

  name: "John",

  age: 30,

  city: "New York"

};

let text = person;

Why do I See [object Object]?

[Object Object] appears when you try to put an object (a data structure with properties) into a context where a string is expected.

[Object Object] how JavaScript deals with this situation.

Some 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 added in a string:

Example

Example Code

javascript

Try it Yourself

// Create an Object

const person = {

  name: "John",

  age: 30,

  city: "New York"

};

// Add Properties

let text = person.name + "," + person.age + "," + person.city;

Using a For .. In Loop

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

Example

Example Code

javascript

Try it Yourself

// Create an Object

const person = {

  name: "John",

  age: 30,

  city: "New York"

};

// Build a Text

let text = "";

for (let x in person) {

  text += person[x] + " ";

};

You must use person[x] in the loop. > person.x will not work (Because x is the loop variable).

Using Object.values()

Object.values() creates an array from the property values:

Example

Example Code

javascript

Try it Yourself

// Create an Object

const person = {

  name: "John",

  age: 30,

  city: "New York"

};

// Create an Array

const myArray = Object.values(person);

// Stringify the Array

let text = myArray.toString();

Using Object.entries()

Object.entries() makes it simple to use objects in loops:

Example

Example Code

javascript

Try it Yourself

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";

for (let [fruit, value] of Object.entries(fruits)) {

  text += fruit + ": " + value + " ";

}

Using JSON.stringify()

JavaScript objects can be converted to a string with JSON method JSON.stringify().

JSON.stringify() is included in JavaScript and supported in all browsers.

The result will be a string written in JSON notation: > {"name":"John","age":50,"city":"New York"}

Example

Example Code

javascript

Try it Yourself

// Create an Object

const person = {

  name: "John",

  age: 30,

  city: "New York"

};

// Stringify Object

let text = JSON.stringify(person);

See Also: > What are JavaScript Objects? > What are Object Properties? > What are Object Methods? > What is this in Objects? > What is an Object Constructor?

Advanced Chapters: > JavaScript Object Definitions > JavaScript Object Advanced this > JavaScript Object Iterations > JavaScript Object Getters & Setters > JavaScript Object Management > JavaScript Object Protection > JavaScript Object Prototypes > JavaScript Object Reference