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
Implode an array with jQuery/JavaScript
In this tutorial, we will learn to implode a given array using JavaScript and JQuery. In web development, many situations occur where we must implode the array. For example, we have given a list of tags and need to implode them into a single string to insert into the web page. Another case where we may require to implode an array is while writing the SQL queries.
Here, we will learn 4 approaches to join the elements of the given array.
Using the Array.join() Method to Implode the Array
The array.join() method allows us to join the array elements into a single string by separating all elements with a specific delimiter.
Syntax
Users can follow the syntax below to implode the array using JavaScript's join() method.
Array.join(delimiter)
In the above syntax, ‘Array’ is a reference array to implode, and the delimiter is a character we need to use to join the array elements.
Example
We created the ‘arr’ array containing the fruit names in the example below. After that, we use the array.join() method to join all fruit names and store them in the ‘fruits’ string.
In the output, we can observe the ‘fruits’ string containing all fruit names from the array.
<html>
<body>
<h3> Using the <i> array.join() </i> method to implode the array in JavaScript </h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
// Array of fruit names
let arr = ["Banana", "Orange", "Apple", "Mango"];
// Join the array elements
let fruits = arr.join();
output.innerHTML = "The original array is: " + arr + "<br><br>";
output.innerHTML += "The joined array is: " + fruits;
</script>
</body>
</html>
Example
We created the array containing the color names in the example below. After that, we used the join() method and passed the ‘|’ characters as a join() method parameter to seprated each array element with the delimiter.
In the output, users can observe the original array element and the result of the imploded array.
<html>
<body>
<h3> Using the <i> array.join() </i> method to implode the array in JavaScript </h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let colors = ["Red", "Green", "White", "Black"];
// Join the array elements
let colorStr = colors.join(' | ');
output.innerHTML = "The original array is: " + colors + "<br><br>";
output.innerHTML += "The joined array is: " + colorStr;
</script>
</body>
</html>
Using the For Loop and ‘+’ Operator to Implode the Array in JavaScript
We can use the for loop or while loop to traverse the array. While traversing the array element, we can join them using the ‘+’ or ‘+=’ operator. Also, we can use the delimiter while joining the array elements.
Syntax
Users can follow the syntax below to implode the array using the for loop and ‘+’ operator.
for ( ) {
result += array[i];
}
In the above syntax, we append the arry[i] to the ‘result’ string.
Example
In the example below, we created the array containing the numbers in increasing order. We created the ‘numberStr’ variable to store the result of the imploded array.
We traverse the array using the for loop and append the number[i] to the ‘numberStr’ in each iteration. Also, we add the ‘ < ‘ delimiter after appending every element to the ‘numberStr’ string.
In the output, we can observe that we have prepared the string containing the ‘<’ and array elements by imploding the array.
<html>
<body>
<h3>Using the <i> for loop and + operator </i> to implode the array in JavaScript</h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let number = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
let numberStr = "";
// Using the for loop
for (let i = 0; i < number.length; i++) {
numberStr += number[i];
if (i < number.length - 1) {
numberStr += " < ";
}
}
output.innerHTML = "The original array is: " + number + "<br><br>";
output.innerHTML += "The joined array is: " + numberStr;
</script>
</body>
</html>
Using the Array.reduce() Method and ‘+’ Operator to Implode the Array in JavaScript
The array.reduce() method converts the array list into a single element by imploding the array. Here, we will execute the array.reduce() method by taking the array as a reference and passing the callback function as a parameter to join the array elements.
Syntax
Users can follow the syntax below to implode the array using the array.reduce() method.
message.reduce((a, b) => a + " " + b);
In the above syntax, we have passed the callback function to join the array elements.
Example
In the example below, we created an array containing the message string. After that, we took the ‘message’ array as a reference and executed the reduce() method to implode the array.
Also, we have passed the a and b parameters to the callback function of the reduce() method. After each iteration, The' a’ stores the result of the imploded array, and ‘b’ represents the current array element. The function body appends the ‘b’ to the ‘a’ via space-separated.
<html>
<body>
<h3>Using the <i> array.reduce() method </i> to implode the array in JavaScript </h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let message = ["Hello", "Programmer", "Welcome", "to", "JavaScript", "Tutorial"];
// Using the array.reduce() method
let messageStr = message.reduce((a, b) => a + " " + b);
output.innerHTML = "The original array is: " + message + "<br><br>";
output.innerHTML += "The joined array is: " + messageStr;
</script>
</body>
</html>
Using the Each() Method to Implode the Array in JQuery
Each () method of jQuery is used to traverse the array elements. We can traverse the array elements and join each element one by one.
Syntax
Users can follow the syntax below to implode the array using each() method of JQuery.
$.each(array, function (index, value) {
treeStr += value + " ";
});
In the above syntax, each() method takes the array to implode as a first parameter and a callback function to join the array as a second parameter.
Example
In the example below, we created the array containing the tree names. After that, we used each() method of jQuery to traverse the array. We get the current index and element value in the callback function of the each() method. So, we append the element value to the ‘treeStr’.
In the end, we can observe the value of the ‘treeStr’ in the output.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i> each() method </i> to implode the array in jQuery</h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let tree = ["oak", "pine", "ash", "maple", "walnut", "birch"];
let treeStr = "";
// Using the each() method
$.each(tree, function (index, value) {
treeStr += value + " ";
});
output.innerHTML = "The original array is: " + tree + "<br><br>";
output.innerHTML += "The joined array is: " + treeStr;
</script>
</body>
</html>
The array.join() method is one of the best to implode the array in JavaScript. However, programmers can also use the for loop and ‘+’ operators if they need more customization while imploding the array. In JQuery, programmers may use each() method or makeArray() and join() method, which works similarly to the join() method of JavaScript.
363 Views
