{"id":21887,"date":"2019-09-06T18:19:41","date_gmt":"2019-09-06T10:19:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21887"},"modified":"2019-09-05T19:56:10","modified_gmt":"2019-09-05T11:56:10","slug":"tabular-data-browser-console","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/tabular-data-browser-console\/","title":{"rendered":"How to Display Data as Table in Browser Console"},"content":{"rendered":"

Console<\/strong> is a browser built-in tool that logs errors that happens on the website. If there are any errors \u2013 such as broken links, incomplete JavaScript functions, or unknown CSS properties \u2013 the browsers will show error messages within the Console.<\/p>\n

On top of that, we can also interact with the Console through the shell and the Console API<\/a>, which comes in useful when testing certain functions and data output. Here, we will show you one handy tip for Console API use.<\/p>\n

Recommended Reading: <\/strong>HTML Table Building \u2013 30+ Beautiful Examples And Useful Javascripts<\/a><\/p>\n

Accessing the Browser Console<\/h2>\n

In Chrome, we can select View > Developer > JavaScript Console<\/strong> menu to bring up the Console. Alternatively, we can also use the shortcut key: Cmd<\/span> + Option<\/span> + J<\/span> on OS X, and Ctrl<\/span> + Shift<\/span> + J<\/span> on Windows.<\/p>\n

Shown below is an error-free Chrome Console.<\/p>\n

\"console<\/figure>\n

From here, we can start using the command provided in Console API<\/a>.<\/p>\n

Interacting with the Console<\/h2>\n

We can interact with the browser Console through the Console itself and by adding JavaScript within the document. As an example, here we tell the Console to output \u201cGood Morning!\u201d by typing console.log()<\/code> command directly in the Console:<\/p>\n

\"console<\/figure>\n

As mentioned, we can also apply the console.log()<\/code> within the document. One practical console.log()<\/code> use is to test a JavaScript conditional statement. We can see more clearly if the result returns true<\/code> or false<\/code> with the help of console.log()<\/code>.<\/p>\n

Below is one example:<\/p>\n

\r\nvar a = 1;\r\nif(a == 1) {\r\n\tconsole.log('true');\r\n} else {\r\n\tconsole.log('false');\r\n}\r\n<\/pre>\n
The code above will return true, since the a<\/code> variable contains the number 1<\/code>. In the Console you should see the browser output the text true<\/code>.<\/p>\n
\"console<\/figure>\n
Output Data as a Table<\/h2>\n
Sometimes, we would be dealing with an Array of data or a list of Objects, as shown below:<\/p>\n
\r\nvar data = [\r\n\t{ name: \"Andi\", age: \"21\", city: \"Tuban\" },\r\n\t{ name: \"Ani\", age: \"25\", city: \"Trenggalek\" },\r\n\t{ name: \"Adi\", age: \"30\", city: \"Kediri\" }\r\n];\r\nconsole.table(data);\r\n<\/pre>\n
This data will be hard to read when we use the console.log()<\/code> method. The console.log()<\/code> method will show the Array in collapsible tree view<\/em>, as shown below.<\/p>\n
\"cole<\/figure>\n
When we are dealing with such an Array, using console.table()<\/code> is the better way to output it. This method will show data in a table format. Taking the same data as above, it will ouput as:<\/p>\n
\"console<\/figure>\n
Conclusion<\/h2>\n
The browser Console helps web developers handle errors in websites. We can also use it to test data output, like with the console.log()<\/code> method. When we have an array data console.table()<\/code>command would come in more useful, as it shows the Array in a table format that is easy to read. Do take note that the console.table()<\/code>is only applicable in Webkit-based browsers such as Chrome, Safari, and the latest version of Opera.<\/p>\n
Further Reading<\/h2>\n