Loading lesson path

JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Display Objects

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind JavaScript Display Objects?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

// ___ an Object

3Order

Put the learning moves in the order that makes the concept easiest to apply.

Displaying Object Properties

Why do I See [object Object]?

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;

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 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;

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

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:

Runnable example

// 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

const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

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

// Create an Object
const person = {
  name: "John", age: 30, city: "New York"
};
// Stringify Object
let text = JSON.stringify(person);

JavaScript Display Objects

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind JavaScript Display Objects?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

// ___ an Object

3Order

Put the learning moves in the order that makes the concept easiest to apply.

Displaying Object Properties

Why do I See [object Object]?

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;

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.

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;

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

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:

Runnable example

// 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

const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

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

// Create an Object
const person = {
  name: "John", age: 30, city: "New York"
};
// Stringify Object
let text = JSON.stringify(person);