Home > Article > Web Front-end > How to view an array of structures in JavaScript?
How to view an array of structures in JavaScript?
- WBOYforward
- 2023-08-30 14:37:05715browse
The easiest way to debug JavaScript code is to use console.log() which many developers use. Sometimes, we need to understand the structure of an array and the stored values for debugging. In this tutorial, we will learn to view an array of structures.
Various methods in JavaScript allow us to inspect the structure of an array. For example, we can know if an array contains objects, nested arrays, strings, numbers, or Boolean values.
Use JSON.stringify() method
The JSON.stringify() method allows us to convert a JSON object into a string. An array is also an object in JavaScript, so we can use the JSON.stringify() method to convert an array into a string. If the array contains objects, "[object object]" is displayed in the result string.
grammar
Users can use the JSON.stringify() method according to the following syntax to view the structure of the array.
JSON.stringify(array);
In the above syntax, we pass the array as a parameter of the JSON.stringify() method.
Example
In the following example, we create an array containing various values such as strings, booleans, and numbers. After that, we use 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, the user can observe the structure of test_array.
Use array.join() method
array.join() method converts all elements into strings and joins them by the delimiter passed as its argument.
grammar
Users can use the array.join() method according to the following syntax to view the structure of the array.
test_array.join(delimiter)
In the above syntax, we need to pass the delimiter to separate the array elements with delimiter.
Example
In the following example, test_array contains strings, booleans, numbers, and objects. We concatenate the array elements using "," delimiter and display the resulting 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 array.toString() method
JavaScript's toString() method is used to convert any object or other data type value other than string to a string. We can use the toString() method of the array to convert the array to a string and see the array structure.
grammar
Users can use the toString() method on the array according to the following syntax to view the array structure by converting the array to a string.
test_array.toString()
Example
In the following example, we take a test_array containing various values as a reference and execute the toString() method. In the output, the user can observe the string representation of the array. test_array contains nested arrays, which are also converted to strings by the toString() method.
<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 ways to view the structure of an array in this tutorial. Within the method, the user needs to write a line of code. Therefore, users can use any of these three methods based on their understanding and comfort level.
The above is the detailed content of How to view an array of structures in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!