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