How to display object value in alert JavaScript?

Alerts are a simple and effective way to display information in JavaScript. They can be used to show the user important notices, warnings, or even just provide feedback on an action they've taken. However, displaying object values in alerts can be tricky if you don’t know how to do it correctly.

In this blog post we will look at how you can use alert() functions with objects so that their properties and values are displayed properly.

How to display object value in alert method.#

The first step is understanding what an object is and why it needs special treatment when being used with alert().

What is an object in JavaScript?

An object is a data structure which stores multiple pieces of related information together as key-value pairs within one single entity. For example:

Here we have created an "object" containing two pieces of data - the name Red and code #ff0000 stored as key-value pairs inside the variable color .

Now let's say we wanted to display these details using alert() function. We could try something like this:

alert(person);  //Outputs [Object Object]

But unfortunately this won't work because all objects get converted into strings when passed through any kind of function like our beloved alert().

So instead what we need to use the JSON.stringify() method to convert the object to a string before passing it to the window.alert() method. Here's an example:

The JSON.stringify() method is used to convert the object to a string. This is necessary because the alert() method can only display strings and numbers and not complex objects.