JavaScript Display Objects
How to Display JavaScript Objects?
Displaying a JavaScript object will output [object Object].
Example
var 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
var 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
var x, txt = "";
var person = {name:"John", age:30, city:"New York"};
for (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():
var person = {name:"John", age:30, city:"New York"};
var myArray = Object.values(person);
myArray is now a JavaScript array, ready to be displayed:
Example
var person = {name:"John", age:50, city:"New York"};
var 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():
var person = {name:"John", age:30, city:"New York"};
var myString = JSON.stringify(person);
myString is now a JavaScript string, ready to be displayed:
Example
var person = {name:"John", age:30, city: "New York"};
var 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.
| Yes | 8.0 | 3.5 | 4.0 | 10.5 |
Stringify Dates
JSON.stringify converts dates into strings:
Example
var person = {name:"John", today:new Date()};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Try it Yourself »
Stringify Functions
JSON.stringify will not stringify functions:
Example
var person = {name:"John", age:function () {return 30;}};
var 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
var person = {name:"John", age:function () {return 30;}};
person.age = person.age.toString();
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Try it Yourself »
Stringify Arrays
It is also possible to stringify JavaScript arrays:
Example
var arr = ["John", "Peter", "Sally", "Jane"];
var 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"]
