10.4 Object Display

Displaying Object Properties

The properties of an object can be displayed as a string:

Example 2: JS Objects - Display object properties

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 3: JS Objects - Displaying the Object 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;

• 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 4: JS Objects - Using Object.values()

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 5: JS Objects - Using JSON.stringify()

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.

Stringify Dates

JSON.stringify converts dates into strings:

Example 6: JS Objects - Stringify Dates

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 7: JS Objects - Stringify Functions part 1

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 8: JS Objects - Stringify Functions part 2

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 9: JS Arrays - Stringify Arrays

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"]