Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to view array of a structure in JavaScript?
The easiest way to debug JavaScript code is using console.log(), which many developers use. Sometimes, we need to know an array's structure and stored values for debugging purposes. In this tutorial, we will learn to view the structure of arrays containing different data types.
Various JavaScript methods allow us to examine the structure of arrays. For example, we can see if an array contains objects, nested arrays, strings, numbers, or Boolean values.
Using the JSON.stringify() Method
The JSON.stringify() method converts JavaScript objects into JSON strings. Since arrays are objects in JavaScript, we can use this method to convert arrays into strings and view their structure clearly.
Syntax
JSON.stringify(array)
Example
In the example below, we create an array containing various data types including strings, Booleans, and numbers. The JSON.stringify() method shows the complete structure:
<html>
<body>
<h3>Using the <i>JSON.stringify()</i> method to view array structure</h3>
<div id="content"></div>
<script>
let content = document.getElementById('content');
function viewArray() {
let test_array = ["Hello", "String 1", true, 30, false, 40];
content.innerHTML = "The array structure is: " + JSON.stringify(test_array);
}
viewArray();
</script>
</body>
</html>
The array structure is: ["Hello","String 1",true,30,false,40]
Using the array.join() Method
The array.join() method converts all array elements into strings and joins them with a specified delimiter. This provides a readable view of array contents.
Syntax
array.join(delimiter)
Example
Here we create an array with mixed data types including an object. The join() method displays elements separated by commas:
<html>
<body>
<h2>Using the <i>array.join()</i> method to view array structure</h2>
<div id="content"></div>
<script>
let content = document.getElementById('content');
function viewArray() {
let test_array = ["value1", false, 3211, true, "value2", { name: "Shubham", age: 22, city: "Rajkot" }];
content.innerHTML = "The array structure is: " + test_array.join(', ');
}
viewArray();
</script>
</body>
</html>
The array structure is: value1, false, 3211, true, value2, [object Object]
Using the array.toString() Method
The toString() method converts arrays into comma-separated strings. It's useful for quickly viewing array contents, including nested arrays.
Syntax
array.toString()
Example
This example demonstrates how toString() handles nested arrays by flattening them into a single string:
<html>
<body>
<h2>Using the <i>array.toString()</i> method to view array structure</h2>
<div id="content"></div>
<script>
let content = document.getElementById('content');
function arrayStructure() {
let test_array = [50, 60, false, true, "TypeScript", "JavaScript", [10, 20, 30]];
content.innerHTML = "The array structure is: " + test_array.toString();
}
arrayStructure();
</script>
</body>
</html>
The array structure is: 50,60,false,true,TypeScript,JavaScript,10,20,30
Comparison of Methods
| Method | Preserves Data Types | Handles Objects | Best For |
|---|---|---|---|
JSON.stringify() |
Yes | Shows full object structure | Debugging complex structures |
join() |
No | Shows "[object Object]" | Simple array display |
toString() |
No | Shows "[object Object]" | Quick comma-separated view |
Conclusion
Use JSON.stringify() for detailed debugging as it preserves data types and object structures. For simple displays, join() and toString() provide quick comma-separated views of array contents.
454 Views
