Add additional matching between two arrays to

erics15 0
Viewed 38

Here's what I want to achieve. I've 2 arrays, one for artists and one for releases. I am currently matching "ArtistID" to each to display "Releases by this artists" on my SingleArtist page. However I want to take it a step further and add another identifier if the release features them. Example : release A has artist A, but a remixer B. Is there a way to do it within by doing more filtering on the arrays(s)? Not sure how to go about it. Thanks.

example from releases.json

{
"id": 9,
"artistID": "SU",
"featuredartist": "ES, FG",
"imageURL": "../images/releases/dulcie.jpg",
"title": "Dulcie Caught a Cricket",
"description": "Released 2020",
"artist": "Sumsuch",
"buy": "https://www.beatport.com/release/we-choose/1916121",
"stream": "https://open.spotify.com/album/4cutoknbgciTGGpAYSZXfK?si=gsNvR6ytTN6KdrPORfSLOg"
},

example from artists.json (the second object is a remixer 'id:0' who is featured on 'id:3' and would like that to display under the "ES" releases

{
"id": 3,
"artistID": "SU",
"imageURL": "./images/sumsuch.jpg",
"singleimageURL": "../images/artists/sumsuch.jpg",
"name": "SUMSUCH",
"bio": "Will Sumsuch has been a musician, producer and DJ",
"soundcloud": "sumsuch"
},

{
"id": 0,
"artistID": "ES",
"imageURL": "./images/artists/ericblue.jpg",
"singleimageURL": "../images/artists/ericblue.jpg",
"name": "ERIC SHANS",
"bio": "A producer and DJ residing in Brooklyn, NY,
},

code for singleartist.js (abbreviated)

 function SingleArtist() {
  const { id } = useParams() //finds single artist from array & matches ID
  const artist = artists.find((a) => a.id === +id)
  //finds ArtistID from Artists then matches any item that has the same value from the Releases array
  const releaseList = releases.filter((b) => b.artistID === artist.artistID)
  const { singleimageURL, name, soundcloud, bio } = artist

  return (
    <Wrapper>
      <div className="artist-container">
        <div className='item'>
          <div className='image'>
            <img className='artist' src={singleimageURL} alt={name} />
          </div>
          <div className="description">
            <p className='name'>
              {name}
            </p>
            <p className='bio'>
              {bio}
            </p>
          </div>
          <a href={'https://soundcloud.com/' + soundcloud} target="_blank" rel="noreferrer">
            Listen to {name}'s Soundcloud
          </a>
        </div>
      </div>
      <span>
        <Link className='link-back' to="/artists"> Back To Artists</Link>
      </span>

      <div className="matches">
        <h4> Releases by {name} </h4>
        {releaseList.map(release => {
          const { imageURL, name, id, buy } = release;
          return (
            <div className="item" key={id}>
              <a href={buy} target="_blank" rel="noreferrer">
                <img className="image" src={imageURL} alt={name} />
              </a>
            </div>
          )
        })}
      </div>
    </Wrapper>
  )
}
reactjs arrays javascript
1 Answers

The way I understand your question, you simply want to find a list of releases that an artist is featured in on the single artist page. This line should do the trick:

let releases = [{
"id": 9,
"artistID": "SU",
"featuredartist": "ES, FG",
},{
"id": 3,
"artistID": "ED",
"featuredartist": "SU, FG",
}]

const featuredList = releases.filter(release => release.featuredartist.split(", ").includes("SU"));

console.log(featuredList);

You can insert this directly below the line where you set releaseList. It is basically the same idea. This line filters the releases again, and then splits the featuredartists string into an array of strings. Then, if the array includes the artist's id, you return it.

JBrown0
Related