javascript - Two Separate Arrays and V-For Loop and V-IF in Vue JS

Question

I am working on a project using Vue JS. This question might be duplicated from other similar questions but honestly, answer of similar questions did not help me to solve this issue!
There are two arrays (separate arrays). One array for singers which store information about each singer such as singer id, singer name and etc.
One array for musics which stores information about music such as music id, music name, singer id and etc.
Now I want to loop through both arrays and compare singer id in both arrays to get related music from musics array using v-for. I used all suggested v-for loop for arrays and nested arrays but it didn't work properly and I receive nothing or an error like: Cannot read property 'singer_id' of undefined.
I tried to solve this issue using regular nested v-for and a v-if:

//Singers Array
artists:[
      {
        singer_id: '1',
        category: 'artist',
        artist_name: 'Ariana Grande',
        pic: encodeURIComponent(require('@/assets/Items/Singers/Ariana Granade/Covers/HomeCover.jpeg')),
        followers: '57932090'
      },
      {
        singer_id: '2',
        category: 'artist',
        artist_name: 'Taylor Swift',
        pic: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/HomeCover.jpg')),
        followers: '41100000'
      },
      {
        singer_id: '3',
        category: 'artist',
        artist_name: 'Eminem',
        pic: encodeURIComponent(require('@/assets/Items/Singers/Eminem/HomeCover.jpg')),
        followers: '36900000'
      },
]

//Musics Array
musics:[
      {
        song_id: '1',
        singer_id: '2',
        song_name: 'Blank Space',
        duration: '00:20',
        cover: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Blank Space.jpg')),
        song: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Taylor Swift - Blank Space.mp3'))
      },
      {
        song_id: '2',
        singer_id: '2',
        song_name: 'Delicate',
        duration: '00:20',
        cover: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Delicate.jpg')),
        song: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Taylor Swift - Delicate.mp3'))
      },
      {
        song_id: '3',
        singer_id: '3',
        song_name: 'Not Afraid',
        duration: '00:20',
        cover: encodeURIComponent(require('@/assets/Items/Singers/Eminem/not afraid.jpg')),
        song: encodeURIComponent(require('@/assets/Items/Singers/Eminem/Eminem - Not Afraid (Teaser).mp3'))
      }
]

//Computing Arrays
export default{
 computed:{
  GetArtists:function(){
    return this.$store.state.artists;
  },
  GetMusics:function(){
    return this.$store.state.musics;
  }
 }
}

<div class="fav_item_rows">
   <div class="fav_item_box" v-for="(songs,i) in GetMusics" :key="i">
       <router-link to="/" v-for="(artists,j) in GetArtists" :key="j">
             <div class="fav_item" v-if="songs[i]['singer_id'] == artists[j]['singer_id']">
               {{songs[i]}}
             </div>
       </router-link>
   </div>
</div>

In this case I receive mentioned error at the top. I also remove [i] and just calling singer_id but it didn't work too.
If someone helps with how to loop through these arrays and using v-for compare singer ids I really appreciate it.

question from:https://stackoverflow.com/questions/65838036/two-separate-arrays-and-v-for-loop-and-v-if-in-vue-js

Answer 1

I modified your code like what you see below. Here is my answer which is mix of all answers you received up to this point!
I added a new computed property named "RelatedSingers" which gets artists data based on singer id in both arrays using "Filter".Then in HTML tags, instead of looping through Artists array, first, use a v-for loop for GetMusics computed property. Then, in child tag loop through RelatedSingers computed property.
I attached my modified code.

let app = new Vue({
  el: "#app",
  data(){
    return{
      artists:[
        {
          singer_id: '1',
          category: 'artist',
          artist_name: 'Ariana Grande',
          //pic: encodeURIComponent(require('@/assets/Items/Singers/Ariana Granade/Covers/HomeCover.jpeg')),
          followers: '57932090'
        },
        {
          singer_id: '2',
          category: 'artist',
          artist_name: 'Taylor Swift',
          //pic: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/HomeCover.jpg')),
          followers: '41100000'
        },
        {
          singer_id: '3',
          category: 'artist',
          artist_name: 'Eminem',
          //pic: encodeURIComponent(require('@/assets/Items/Singers/Eminem/HomeCover.jpg')),
          followers: '36900000'
        },
      ],
      musics:[
        {
          song_id: '1',
          singer_id: '2',
          song_name: 'Blank Space',
          duration: '00:20'
          //cover: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Blank Space.jpg')),
          //song: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Taylor Swift - Blank Space.mp3'))
        },
        {
          song_id: '2',
          singer_id: '2',
          song_name: 'Delicate',
          duration: '00:20'
          //cover: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Delicate.jpg')),
          //song: encodeURIComponent(require('@/assets/Items/Singers/Taylor Swift/Taylor Swift - Delicate.mp3'))
        },
        {
          song_id: '3',
          singer_id: '3',
          song_name: 'Not Afraid',
          duration: '00:20'
          //cover: encodeURIComponent(require('@/assets/Items/Singers/Eminem/not afraid.jpg')),
          //song: encodeURIComponent(require('@/assets/Items/Singers/Eminem/Eminem - Not Afraid (Teaser).mp3'))
        }
      ]
    }
  },

  computed:{
    GetArtists:function(){
        return this.artists;
    },
    GetMusics:function(){
        return this.musics;
    },
    RelatedSingers:function(){
      return id => this.artists.filter(singer => singer.singer_id === id);
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
<div id="app" class="fav_item_rows">
       <div class="fav_item_box">
           <ul v-for="(song,i) in GetMusics" :key="i">
                 <li class="fav_item" v-for="(artist,j) in RelatedSingers(song['singer_id'])" :key="j">
                   {{artist['artist_name']}} {{song['song_name']}}
                 </li>
           </ul>
       </div>
    </div>