Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to view array of a structure in JavaScript?
The easiest way to debug the JavaScript code is using the console.log(), which many developers use. Sometimes, we require to know the array's structure and stored values for the debugging purpose. In this tutorial, we will learn to view the array of structures.
Various methods of JavaScript allow us to check the structure of the array. For example, we can know if the array contains an object, nested array, string, number or Boolean values.
Use the JSON.stringify() Method
The JSON.stringify() method allows us to convert the JSON objects into the string. An array is also an object in JavaScript, so we can use the JSON.stringify() method to convert the array into a string. If the array contains the object, it shows ‘[object object]’ in the resultant string.
Syntax
Users can follow the syntax below to view the structure of the array using the JSON.stringify() method.
JSON.stringify(array);
In the above syntax, we have passed the array as a parameter of JSON.stringify() method.
Example
In the example below, we have created the array containing various values like strings, Booleans, and numbers. After that, we used the JSON.stringify() method to see the structure of the array.
<html>
<body>
<h3>Using the <i> JSON.stringify() </i> method to view the 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>
In the output, users can observe the structure of the test_array.
Use the array.join() method
The array.join() method converts all elements into the string and joins them by delimiter passed as a parameter of it.
Syntax
Users can follow the syntax below to use the array.join() method to view the structure of the array.
test_array.join(delimiter)
In the above syntax, we need to pass the delimiter to separate array elements with a delimiter.
Example
In the example below, test_array contains the string, boolean, numbers, and object. We have joined the array elements using the ‘,’ delimiter and shown the resultant string on the web page.
<html>
<body>
<h2>Using the <i> array.join() </i> method to view the 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>
Use the array.toString() method
The toString() method of JavaScript is used to convert any object or values of other data types except string into the string. We can use the toString() method with an array to convert the array into a string and take a look at the array structure.
Syntax
Users can follow the syntax below to use the toString() method with the array to view the array structure by converting the array into the string.
test_array.toString()
Example
In the example below, we have taken the test_array containing various values as a reference and executed the toString() method. In the output, users can observe the string representation of the array. The test_array contains the nested array, and the toString() method has also converted it to the string.
<html>
<body>
<h2>Using the <i> array.toString() </i> method to view the 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>
Users learned three different approaches to viewing the structure of the array in this tutorial. In approaches, users need to write a single line of code. So, users can use any method among the three according to their understanding and comfortability.
316 Views
