Vue Js Inner Join of Array of Objects : Vue.js does not provide an in built method for merging or joining an array of objects, In order to join or inner join an array of objects, we can use the filter(), map(), and find() methods. We can also use custom functions such as the filter(), map(), and find() methods to inner join an array of objects. By combining the filter(), map(), and find() methods, we can efficiently create a custom function that will join an array of objects. Together, these methods can quickly create a custom function that will inner join an array of objects This tutorial will teach you how to join, merge, inner join, or concatenate an array of objects.
How to combine an array of objects in Vue Js?
Through this tutorial, we can learn how to use filter(), map(), and find() methods to inner join an array of objects, while also understanding how these methods can create a custom function that will more efficiently join an array of objects
Vue Js Merge Array of Object | Example
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
employees: [
{ id: 1, name: 'Andrew' },
{ id: 2, name: 'John' },
{ id: 3, name: 'Robert' },
{ id: 4, name: 'Jos' },
],
employeeDetails: [
{ emp_id: 1, role: 'Frontend Developer' },
{ emp_id: 2, role: 'Backend Developer' },
{ emp_id: 3, role: 'Fullstack Developer' },
{ emp_id: 4, role: 'IOS Developer' }
],
results: '',
}
},
methods: {
mergeArrayObject() {
this.results = this.employees.filter(emp => this.employeeDetails.map(empdtl => empdtl.emp_id).indexOf(emp.id) !== -1)
.map(emp => {
return { ...emp, ...this.employeeDetails.find(empdtl => empdtl.emp_id === emp.id) };
});
}
}
});
</script>
Output of above example
