Object display

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Object Display

How to Display JavaScript Objects?

Displaying a JavaScript object will output [object Object].

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Displaying a JavaScript object will output [object Object]:</p>

<p id=”demo”></p>

<script>

const person = {

  name: “John”,

  age: 30,

  city: “New York”

};

document.getElementById(“demo”).innerHTML = person;

</script>

</body>

</html>

Output

JavaScript Objects

Displaying a JavaScript object will output [object Object]:

[object Object]

Below are 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 shown as a string:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Display object properties:</p>

<p id=”demo”></p>

<script>

const person = {

  name: “John”,

  age: 30,

  city: “New York”

};

document.getElementById(“demo”).innerHTML = person.name + “, ” + person.age + “, ” + person.city;

</script>

</body>

</html>

Output

JavaScript Objects

Display object properties:

John, 30, New York

Displaying the Object in a Loop

The properties of an object can be kept together in a loop:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Display object properties:</p>

<p id=”demo”></p>

<script>

const person = {

  name: “John”,

  age: 30,

  city: “New York”

};

let txt = “”;

for (let x in person) {

  txt += person[x] + ” “;

};

document.getElementById(“demo”).innerHTML = txt;

</script>

</body>

</html>

Output

JavaScript Objects

Display object properties:

John 30 New York

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();

const person = {

  name: “John”,

  age: 30,

  city: “New York”

};

const myArray = Object.values(person);

myArray is now a JavaScript array, ready to be displayed:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Object.values() converts an object to an array.</p>

<p id=”demo”></p>

<script>

const person = {

  name: “John”,

  age: 30,

  city: “New York”

};

document.getElementById(“demo”).innerHTML = Object.values(person);

</script>

</body>

</html>

Output

JavaScript Objects

Object.values() converts an object to an array.

John,30,New York

Using JSON.stringify()

Any JavaScript object can be stringified (converted to a string) using the JavaScript function JSON.stringify():

const person = {

  name: “John”,

  age: 30,

  city: “New York”

};

let myString = JSON.stringify(person);

myString is now a JavaScript string, which is ready to be displayed:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Display properties in JSON format:</p>

<p id=”demo”></p>

<script>

const person = {

  name: “John”,

  age: 30,

  city: “New York”

};

document.getElementById(“demo”).innerHTML = JSON.stringify(person);

</script>

</body>

</html>

Output

JavaScript Objects

Display properties in JSON format:

{"name":"John","age":30,"city":"New York"}

JSON.stringify() is included in JavaScript and supported in all major browsers.

Stringify Dates

JSON.stringify converts dates into strings:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>JSON.stringify will convert dates into strings:</p>

<p id=”demo”></p>

<script>

var person = {

  name: “John”,

  today: new Date()

};

document.getElementById(“demo”).innerHTML = JSON.stringify(person);

</script>

</body>

</html>

Output

JavaScript Objects

JSON.stringify will convert dates into strings:

{"name":"John","today":"2022-07-13T05:02:31.018Z"}

Stringify Functions

JSON.stringify will not stringify functions:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>JSON.stringify will not stringify functions:</p>

<p id=”demo”></p>

<script>

const person = {

  name: “John”,

  age: function () {return 30;}

};

document.getElementById(“demo”).innerHTML = JSON.stringify(person);

</script>

</body>

</html>

Output

JavaScript Objects

JSON.stringify will not stringify functions:

{"name":"John"}

This can be “fixed” if you convert the functions into strings before stringifying.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Display Objects</h2>

<p>JSON.stringify will not stringify functions.</p>

<p>You have to convert functions to strings first:</p>

<p id=”demo”></p>

<script>

const person = {

  name: “John”,

  age: function () {return 30;}

};

person.age = person.age.toString();

document.getElementById(“demo”).innerHTML = JSON.stringify(person);

</script>

</body>

</html>

Output

JavaScript Display Objects

JSON.stringify will not stringify functions.

You have to convert functions to strings first:

{"name":"John","age":"function () {return 30;}"}

Stringify Arrays

It is also possible to stringify JavaScript arrays:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>JSON.stringify can stringify arrays:</p>

<p id=”demo”></p>

<script>

const arr = [“John”, “Peter”, “Sally”, “Jane”];

document.getElementById(“demo”).innerHTML = JSON.stringify(arr);

</script>

</body>

</html>

Output

JavaScript Arrays

JSON.stringify can stringify arrays:

["John","Peter","Sally","Jane"]