How to Display JavaScript Objects?
Displaying a JavaScript object will output [object Object].
var person = {name:"John", age:30, city:"New York"};
document.getElementById("demo").innerHTML = person;
Some common solutions to display JavaScript objects are:
The properties of an object can be displayed as a string:
var person = {name:"John", age:30, city:"New York"};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
The properties of an object can be collected in a loop:
var x, txt = "";
var person = {name:"John", age:30, city:"New York"};
for (x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
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:
var person = {name:"John", age:50, city:"New York"};
var myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
JSON.stringify
will not stringify functions:
var person = {name:"John", age:function () {return 30;}};
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
This can be "fixed" if you convert the functions into strings before stringifying.
var person = {name:"John", age:function () {return 30;}};
person.age = person.age.toString();
var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;