JavaScript Display Objects
How to Display JavaScript Objects?
Displaying a JavaScript object will output [object Object].
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Try it Yourself »
Some common 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 displayed as a string:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
Try it Yourself »
Displaying the Object in a Loop
The properties of an object can be collected in a loop:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
Try it Yourself »
You must use person[x] in the loop.
person.x will not work (Because x is a variable).
Using Object.values()
Any JavaScript object can be converted to an array using Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray is now a JavaScript array, ready to be displayed:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Try it Yourself »
Object.values() is supported in all major browsers since 2016.
54 (2016)
14 (2016)
47 (2016)
10 (2016)
41 (2016)
Using JSON.stringify()
Any JavaScript object can be stringified (converted to a string) with the JavaScript function
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString is now a JavaScript string, ready to be displayed:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Try it Yourself »
The result will be a string following the JSON notation:
{"name":"John","age":50,"city":"New York"}
JSON.stringify() is included in JavaScript and supported in all major browsers.
Stringify Dates
JSON.stringify converts dates into strings:
Example
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Try it Yourself »
Stringify Functions
JSON.stringify will not stringify functions:
Example
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Try it Yourself »
This can be "fixed" if you convert the functions into strings before stringifying.
Example
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Try it Yourself »
Stringify Arrays
It is also possible to stringify JavaScript arrays:
Example
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
Try it Yourself »
The result will be a string following the JSON notation:
["John","Peter","Sally","Jane"]
★
+1
Reference: https://www.w3schools.com/js/js_object_display.asp