JavaScript Display Objects
How to Display JavaScript Objects?
When you show a JavaScript object, it will appear as [object Object].
Here are some usual ways to show JavaScript objects:
- Showing the characteristics of an object by its name.
- Showing the Characteristics of an Object in a Loop
- Showing the object using Object.values()
- Showing the object using JSON.stringify()
Displaying Object Properties
An object's characteristics can be shown in the form of a string.
Displaying the Object in a Loop
You can gather the characteristics of an object using a loop.
You need to utilize person[x] within the loop.
person.x won't function correctly because x is a variable.
Using Object.values()
You can turn any JavaScript object into an array using the Object.values() method.
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray is a JavaScript array that is ready to be shown.
Using JSON.stringify()
You can turn any JavaScript object into a string using the function JSON.stringify().
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
The JavaScript string, myString, is now prepared for display.
The outcome will be a series of characters formatted in JSON notation.
{"name":"John","age":50,"city":"New York"}
The JSON.stringify() function is a part of JavaScript and works in all the main web browsers.
Stringify Dates
The JSON.stringify function transforms dates into strings.
Stringify Functions
The function JSON.stringify cannot convert functions into strings.
To solve this issue, you can change the functions into strings before converting them into a string format.
Stringify Arrays
You can convert JavaScript arrays into strings.
The output will be a text formatted using JSON notation.
["John","Peter","Sally","Jane"]
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<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>
HTML
CSS
Javascript
Jquery