How to Display JavaScript Objects?

In this tutorial, you will learn how to display JavaScript objects in the browser console, as well as how to convert them to JSON strings.

There are different ways to display JavaScript objects depending on your use case.

Here are some common methods:

Using console.log()

You can use the console.log() method to display objects in the browser console. This is a quick and easy way to inspect objects and their properties.

As an example:

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
  },
};

console.log(person);

Output :

{
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  }
}

Using JSON.stringify()

The JSON.stringify() method converts a JavaScript object or value to a JSON string. This is useful when you need to transmit or store an object as a string, or when you need to display an object in a web page.

As an example:

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
  },
};

const jsonString = JSON.stringify(person);

console.log(jsonString);

Output:

{"name":"John","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"}}

Using a loop

The for...in loop allows us to iterate over an object's properties and display them in the browser console.

This is useful when you need to display an object's properties in a specific order, or when you need to display only certain properties.

As an example:

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
  },
};

for (let prop in person) {
  console.log(prop + ": " + person[prop]);
}

Output:

name: John
age: 30
address: [object Object]

Example

To display an object in a web page using the innerHTML property, you can first create an HTML element (e.g., a div) and then set its innerHTML to the object's properties.

Here's an example:

Editor

Loading...

In this example:

• We creates a div element with an id of output, and then uses JavaScript to generate HTML code that displays the person object's properties.
• The for...in loop iterates over the object's properties, and for each property, a p element is created with the property name and value.
• The resulting HTML code is then set as the innerHTML of the output div.

note

The address property is displayed as [object Object] because it is an object itself.

Using Object.values()

Object.values() is a built-in method in JavaScript that allows you to extract the values of an object's properties and return them as an array.

Here's an example:

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
  },
};

const values = Object.values(person);

console.log(values);

Output:

["John", 30, {street: "123 Main St", city: "Anytown", state: "CA"}];

As you can see, Object.values() returns an array containing the values of the person object's properties. The order of the values in the array corresponds to the order in which they were defined in the object.

Using JSON.stringify()

JSON.stringify() is a built-in method in JavaScript that converts a JavaScript object or value to a JSON string. JSON stands for JavaScript Object Notation, and it is a lightweight data interchange format that is easy to read and write for humans, and easy to parse and generate for machines.

As an example:

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
  },
};

const json = JSON.stringify(person);

console.log(json);

Output:

{"name":"John","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"}}

In this example:

• JSON.stringify() converts the person object to a JSON string, where property names are in double quotes and values are in their JSON representation.
• In this case, the nested address object is also converted to a JSON object within the main JSON object.

You can also specify a "replacer" function as the second parameter to JSON.stringify() to filter and transform the object's properties before they are converted to a JSON string.

As an example:

const person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
  },
};

const json = JSON.stringify(
  person,
  (key, value) => {
    if (typeof value === "string") {
      return value.toUpperCase();
    }
    return value;
  },
  2
);

console.log(json);

Output:

{
  "name": "JOHN",
  "age": 30,
  "address": {
    "street": "123 MAIN ST",
    "city": "ANYTOWN",
    "state": "CA"
  }
}

In this example:

• The replacer function converts all string values to uppercase before they are included in the JSON string.
• The 2 parameter specifies that the resulting JSON string should be indented with 2 spaces for readability.

Stringify Functions

When you pass a function as a property value of an object to JSON.stringify(), the function is automatically omitted from the resulting JSON string. This is because functions are not valid JSON data types.

As an example:

const obj = {
  name: "John",
  age: 30,
  greet: function () {
    console.log("Hello");
  },
};

const json = JSON.stringify(obj);

console.log(json);

Output:

{"name":"John","age":30}

As you can see, the greet function property is omitted from the resulting JSON string.

If you need to include functions in the JSON string, you can convert them to strings manually before passing the object to JSON.stringify(). However, keep in mind that this may not be a reliable way to transmit or store code and could lead to security vulnerabilities.

Here's an example of manually converting a function to a string:

const obj = {
  name: "John",
  age: 30,
  greet: function () {
    console.log("Hello");
  },
};

obj.greet = obj.greet.toString(); // Convert the function to a string

const json = JSON.stringify(obj);

console.log(json);

Output:

{"name":"John","age":30,"greet":"function () {\n    console.log('Hello');\n  }"}

In this example:

• The greet function is now included in the resulting JSON string as a string value.
• However, this approach should be used with caution as it may not always produce reliable results.