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