JavaScript Display Objects

❮ Previous Next ❯

How to Display JavaScript Objects?

Displaying a JavaScript object will output [object Object].

Example

// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};

let text = person;

Try it Yourself »

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

// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};

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

Try it Yourself »

Using a For .. In Loop

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

Example

// 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] + " ";
};

Try it Yourself »

Note:

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:

// 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();

Try it Yourself »

Using Object.entries()

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

Example

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

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

Try it Yourself »