Loading lesson path
Concept visual
Start at both ends
[object Object].
// 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 using Object.values() Displaying the Object using JSON.stringify()
The properties of an object can be added in a string:
// 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:
// 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:
// 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:
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"}// Create an Object const person = {
name: "John", age: 30, city: "New York"
};
// Stringify Object let text = JSON.stringify(person);JavaScript Object Getters & Setters