How to print object array in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to print object arrays in JavaScript.

What is an object array or an array of objects? An array of objects is used to store a fixed-size sequential collection of identical elements and store many values in one variable.

Next, we will see the options to print an array of objects in JavaScript.

Using the stringify() Method of the JSON Object

Here, we will learn how to stringify the object array. To correctly display an array of objects, we need to format the array as a JSON string. JSON.stringify() formats the array and gives the correct print. We can use a <pre> tag to display the output.

Users can follow the syntax below to use this.

Syntax

JSON.stringify(v,r,s)

In the syntax above, the last two parameters are optional.

Parameters

v − This is the array of objects.
r − This is the replacer. It can change the output by altering or eliminating values. The method will print all values if the r value is null or unspecified. Either a function or an array is used as a replacer.
s − This is the spacing value for the output display. It is for readability purposes. Nothing, null, string, or 1-10 are the possible values of this parameter. If the value is less than 1, JSON print will not have space. If the value is greater than 10, 10 only is taken for indentation. If the value is a string, either the string or the first ten characters of the string are considered for spacing.

Example

Here in this code, we are taking an array of objects. JSON.stringify() is called directly with this value. Here, the indentation is 1. A condition is given to display the name key alone from the JSON object. This is the second parameter.


<html>
<body>
   <pre id = "idPrint"> </pre>
   <script>
      let arr = [{name: "Orange", value: 1}, {name: "Grapes", value: 2},
      {name: "Apple", value: 3}];
      document.getElementById("idPrint").innerHTML = JSON.stringify(arr,
      null, 4);
   </script>
</body>
</html>

Using console.table() Method

Here we will learn how the console.table() method works. This method strictly needs one input. The input is either an array or an object. The method also processes nested cases of both the array and the objects. The second parameter is the column, which is optional.

Each element in the enumerable property or the input is displayed as the row of a table. The first column of the table is the array index. In Firefox, 1000 rows are the full display. The method allows the users to sort each table column by clicking the label.

All browsers that use standard consoles support this method, and Internet Explorer does not support it.

Users can follow the syntax below to use this.

Syntax

console.table(d, c)

In the syntax above, we need to give the array of objects as the first input.

Parameters

d − An array of objects.
c − Here, we need to specify the key names of the object. The specified key's keyvalue pairs only will is displayed in the output.

Example

We are creating an array of objects in this example program using the new method. This data is given as the first parameter to the console.table() method.

Here, three objects are there in the input. But we have restricted to display of only two in the table format. The key names of the required objects are given as the second parameter. The console.log() method with the program title in the first parameter and the CSS values as the next parameters display the styled title in the following output.

Users need to open the console to see the output for the below example.


<html>
<body>
   <p> Please open Console and rerun the program to check the output</p>
   <pre id="idCons"> </pre>
   <script>
      // An array of objects
      function infoDisp(id, name, job) {
         this.Id = id;
         this.Name = name;
         this.Work = job;
      }
      const a = new infoDisp(1, "John", "Doctor");
      const b = new infoDisp(2, "Grace", "Homemaker");
      const c = new infoDisp(3, "Eagan", "Not working");
      //print
      console.log('%cThe JavaScript program prints an array of objects
      using %cconsole.table() method', 'font-weight: bold; font-size:
      16px;color: #000000;', 'font-weight: bold; font-style: italic; font-size:
      16px;color: #000000;');
      console.table([a, b, c], ["Name", "Work"]);
   </script>
</body>
</html>

When you open the Console and rerun the above program, you will see output as below screenshot.

This tutorial helped us to learn about the two ways to print an object array. We use the console.dir() generally to verify the object array. To display the object array on the page, JSON.stringify() is used.

We can use the console if we need the table format of the object array.table() method. The only drawback is that some consoles do not support this method. Some console displays the column names in ascending order. That is, the actual object key order is lost.

In short, both methods are simple. Users have choice to choose any method according to their print requirements.