vue.js - How to merge (equal and unequal length) arrays by Id on Created() in Vue2

Question

I need a code advice, since not finding a solution...Potentially two part question:

On Created(), I have 2 arrays that I want to combine (one of arrays is an external Axios API)

'''

<template>
      <div v-for="merged in mergedArray.slice(0, 5)">

          Title: {{merged.title}}
          <!-- this is initaiall from arrayAxios  -->

          Color: {{merged.color}}
          <!-- this is initaiall from arrayVue  -->

      </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            arrayAxios: null,
            arrayVue: [
                {id:1, name: "Paris", color: "blue"},
                {id:1, name: "Milano", color: "green"},
                {id:1, name: "London", color: "gray"}
            ],
            mergedArray:null 
        }
    },
    created(){
        axios.get('https://jsonplaceholder.typicode.com/albums/')
            .then((response) => {
                this.arrayAxios = response.data;
        });    
    },
}
</script>

'''

1st part (option): The IDs match, equal length arrays. On Created (or Mounted), the idea would be to push data from the Axios fetched array (arrayAxios in the example) into the already existing one (arrayVue in the example), and display the combined new result. The merging is to be done by matching the exact Ids, and thus just concatenating the existing properties of an element in the aaray, into a new array (mergedArray).

2nd part (less important for me, but interesting maybe for others): The Ids do not match fully, since unequal arrays Lengths of arrays are different (does not matter which one), thus only portion of the Ids match, so it would have to be a loop to return to the initial element once the shorter arrays gets exhausted (fully concatenated) and assigned new properties. For example, the Axios request (longer array) will get 100 response to only 3 arrayVue elements, so the first three Axios results would get assigned to the Ids 1, 2, 3 respectively of the arrayVue, and push into the mergedArray. However, the next 3 Axios will continue the loop and the results will again face the only three initial arrayVue elements.

Answer 1

For your first case, you can make use of a filter() to check whether the id in the two arrays matches or not.

this.arrayAxios.filter(arr => this.arrayVue.filter(a => a['id'] === arr['id']))

This will return those objects from arrayAxios which matches the id of arrayVue.