---
title: Object Display
description: "## 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…"
url: "https://apprentice.mn/docs/object-display/"
updated: "2021-05-18"
category: Javascript
---

# Object Display

## 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.

| ![](https://www.w3schools.com/images/compatible_chrome.gif) | ![](https://www.w3schools.com/images/compatible_edge.gif) | ![](https://www.w3schools.com/images/compatible_firefox.png) | ![](https://www.w3schools.com/images/compatible_safari.gif) | ![](https://www.w3schools.com/images/compatible_opera.gif) |
| --- | --- | --- | --- | --- |
| 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.

| ![](https://www.w3schools.com/images/compatible_chrome.gif) | ![](https://www.w3schools.com/images/compatible_edge.gif) | ![](https://www.w3schools.com/images/compatible_firefox.png) | ![](https://www.w3schools.com/images/compatible_safari.gif) | ![](https://www.w3schools.com/images/compatible_opera.gif) |
| --- | --- | --- | --- | --- |
| 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”]

         [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fobject-display%2F&linkname=Object%20Display](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fobject-display%2F&linkname=Object%20Display)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fobject-display%2F&linkname=Object%20Display](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fobject-display%2F&linkname=Object%20Display)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fobject-display%2F&linkname=Object%20Display](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fobject-display%2F&linkname=Object%20Display)[https://www.addtoany.com/share](https://www.addtoany.com/share)