Compare two values in an array of objects React and if the value (artistID) matches, display the obj-CodePudding

Was curious if anyone had the best way to approach this. Here's what I am trying to achieve. I have a list of artists that's getting fetched from one array (which contains objects in the example below is one of them) (let's call it A), then clicking the name of the artist goes to a single artist page. What I want to do is display the releases (from array b) where the artist ID from array B and the Artist ID from array A match. Some code below. Essentially something like "Releases from this artist". I am using "artistID" in both arrays to compare if they are equal or not. I've tried a few things to no avail. Only one comes back instead of the 2 in this example. Thanks

array a (artists sample)

 {
    "id": 0,
    "imageURL": "./images/artists/ericblue.jpg",
    "singleimageURL": "../images/artists/ericblue.jpg",
    "artistID": "ES",
    "name": "ERIC SHANS",
    "bio": "bio" 
    "soundcloud": "eric-shans"
  },

array b (releases sample)

   {
    "id": 0,
    "artistID": "ES",
    "imageURL": "../images/releases/cloudbursts.jpg",
    "title": "Cloud Bursts",
    "artist": "ERIC SHANS",
    "description": "One of the main releases",
    "buy": "https://www.beatport.com/release/ardour/3096956",
    "stream": "https://open.spotify.com/album/5vNYmx4uNY5fIPrOCR0cUa?si=lwCXwLGtSn6g6ZNToPZKRQ"
    },
    {
    "id": 1,
    "artistID": "ES",
    "imageURL": "../images/releases/archtypes.jpg",
    "title": "Archetypes",
    "description": "Mexico City based artist Eisenheim",
    "artist": "EISENHEIM",
    "buy": "https://www.beatport.com/release/we-choose/1916121",
    "stream": "https://open.spotify.com/album/4cutoknbgciTGGpAYSZXfK?si=gsNvR6ytTN6KdrPORfSLOg"
    },

And in my SingleArtist.js

import { Link, useParams } from 'react-router-dom'
import artists from '../data/artists.json'
import releases from "../data/releases.json";

function SingleArtist() {
  const { id } = useParams() //finds single artist from array & matches ID
  const artist = artists.find((a) => a.id ===  id);
  const release = releases.filter((b) => b.id ===  id);


  return (
      <div className="artist-container">
        <div className='item'>
          <h3> Artist Info </h3>
          <p>{artist.name}</p>
          <div className='image'>
            <img src={artist.singleimageURL} alt={artist.name} />
          </div>
          <div className="info">
            {artist.bio}
          </div>
        </div>
      </div>
      <a href={'https://soundcloud.com/'   artist.soundcloud} target="_blank" rel="noreferrer">
        Soundcloud
      </a>
      <h3>
        <Link className='link-back' to="/artists"> Back To Artists</Link>
      </h3>
       <div className="matches">
    <ul>
  <h4> Releases by this artist (here's where I am stumped) </h4>

    {release.map(release => {
       return <li>{release.title}</li>
    })}
    </ul>
  </div>
    </Wrapper>
  )
}

CodePudding user response：

This line:

const release = releases.filter((b) => b.id ===  id);

should instead be something like:

const artistReleases = releases.filter((b) => b.artistID === artist.artistID);

You were getting only one because you're filtering by your original id (probably either 1 or 0, which is selecting from releases only the entry whose id property matches the param id.