The array objects shall contain String properties. You may want to join the string properties of the array objects.
Answer: array.reduce() method can be used to join values in an array of objects in JavaScript.
This tutorial teaches you the different methods to perform join on value in an array of objects in JavaScript and when it is appropriate to use each method.
Table of Contents
Using Reduce
The reduce() method reduces an array of elements into a single element by applying the user-supplied function to reduce the elements.
To join on value in an array of objects, you can use the reduce() method and concatenate the property in the JavaScript object using the plus operator.
You can use this method when you want to join the value in an array of objects and return a single JavaScript object.
Code
The following code demonstrates how to use the reduce method and concatenate the name value in the array of Objects.
var yourArray = [
{ id: 0, name: "Bob"},
{ id: 1, name: "Ram"},
{ id: 2, name: "Peter"}
];
var joinedString = yourArray.reduce(function(a, b) {
return (a.name || a) + " - " + b.name
});
console.log(joinedString);Using Map
The map() method creates a new array based on the results of applying a user-defined function on each element of the array.
To perform the join on the value in an array of objects,
- Return the value of a property in a JavaScript object during each iteration in a map and store it in an array
- Use the
join()method to concatenate the values
You can use this method when you want to create a new array with the specific object property of each element in the array before performing join using the join() method. The new array with the elements can be used later in the programming for other purposes.
Code
The following code demonstrates how to create a new array using the map() function and use the new array to join the elements using the join() method.
var yourArray = [
{ id: 0, name: "Bob"},
{ id: 1, name: "Ram"},
{ id: 2, name: "Peter"}
];
var names = yourArray.map((a) => a.name);
console.log(names.join(" - "));Using For Each
The forEach() method executes the user-defined function to each element in the array once.
To join the value of the objects in an array,
- Iterate over the using
foreach - During each iteration, concatenate the desired property to an existing variable
- Once the iteration is complete, you’ll have a single JavaScript object that contains the joined string value.
This method is similar to the traditional for loop. You can use this method to join a value in an array of objects and apply any other function before concatenating. For example, you can change a string to upper case before concatenating.
Code
The following code demonstrates how to perform join on value in an array of objects using the foreach() method.
var yourArray = [
{ id: 0, name: "Bob"},
{ id: 1, name: "Ram"},
{ id: 2, name: "Peter"}
];
var joinedString = "";
yourArray.forEach(function(a) {
joinedString = joinedString + " - " + a.name.toUpperCase();
});
console.log(joinedString);This is also known as the joining array of objects to a String.
