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. I believe it's just a matter of running a for loop to check and see if const a & b match and then displaying the object within the array. Thanks in advance.

Artist array sample

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

Release array 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"
 },

And in my SingleArtist.js

import { Link } from 'react-router-dom'
import { 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.find((b) => b.id ===  id);
  const a = artist.artistID
  const b = release.artistID // these are coming back from the array successfully as "ES"


  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>
      <h4> Releases by this artist </h4>
      <div className="matches">
        Where I want to put this.
      </div>
    </Wrapper>
  )
}v

CodePudding user response：

You should not .find a release, as that will return just the first release of that artist. You should use the .filter to get all matching releases. Then you can .map over that list to display them

function SingleArtist() {
  const { id } = useParams() //finds single artist from array & matches ID
  const artist = artists.find((a) => a.id ===  id);
  const releases = 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>
      <h4> Releases by this artist </h4>
      <div className="matches">
        <ul>
        {releases.map(release => {
           // here you can display any part of each release
           return <li>{release.title}</li>
        })}
        </ul>
      </div>
    </Wrapper>
  )
}v

CodePudding user response：

in order to merge arrays based on id you could do the following in your function:

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


const array2 = [{
  "id": 2,
  "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"
}]



  const merged = array1.map(itm => ({...itm, ...array2.find(item => item.id === itm.id && item)}))

console.log(merged)

obviously this is a very simplified version, I would assume you would be utilizing state etc.