View Categories

Object Display

1 min read

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;

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;

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;

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;

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;

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;

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;

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;

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;

The result will be a string following the JSON notation:

[“John”,”Peter”,”Sally”,”Jane”]

Powered by BetterDocs

Leave a Reply