(JavaScript) Find same value in different arrays of objects

Question

I am making a courses card component in the React app. I have two arrays with the data to fill these cards.

THE COURSES ARRAY OF OBJECTS:

const courses = [
    {
        id: 'de5aaa59-90f5-4dbc-b8a9-aaf205c551ba',
        title: 'JavaScript',
        description: `Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum
    has been the industry's standard dummy text ever since the
    1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book. It has survived
    not only five centuries, but also the leap into electronic typesetting, remaining essentially u
    nchanged.`,
        creationDate: '8/3/2021',
        duration: 160,
        authors: [
            '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
            'f762978b-61eb-4096-812b-ebde22838167',
        ],
    },
    {
        id: 'b5630fdd-7bf7-4d39-b75a-2b5906fd0916',
        title: 'Angular',
        description: `Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum
    has been the industry's standard dummy text ever since the
    1500s, when an unknown
    printer took a galley of type and scrambled it to make a type
    specimen book.`,
        creationDate: '10/11/2020',
        duration: 210,
        authors: [
            'df32994e-b23d-497c-9e4d-84e4dc02882f',
            '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
        ],
    },
];

THE AUTHORS ARRAY OF OBJECTS:

const authors = [
    {
        id: '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
        name: 'Vasiliy Dobkin',
    },
    {
        id: 'f762978b-61eb-4096-812b-ebde22838167',
        name: 'Nicolas Kim',
    },
    {
        id: 'df32994e-b23d-497c-9e4d-84e4dc02882f',
        name: 'Anna Sidorenko',
    },
    {
        id: '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
        name: 'Valentina Larina',
    },
];

MY TRIES TO MATCH AND "DE-HASH" THE AUTHORS:

const COURSE = props.value;
    // AUTHOR = authors.find((el) => el.id === COURSE.authors[0]);
    // const filteredArray = array1.filter(value => array2.includes(value));
    // arrA.filter(x => arrB.includes(x));
    const authorsDeHash = (authorsHashed, authors) => {
        // const myarr = [];
        for (let i of authorsHashed) {
            // console.log(authorsHashed);
            console.log(authors.find((el) => el.id === authorsHashed[i]));
            // myarr.push(authors.find((el) => el.id === authorsHashed[i]));
        }
    };
    authorsDeHash(COURSE.authors, authors);

UPD: since I'm already passing a ONE single course from the parent component, I don't need to search for the value in entire "courses" array. So basically I have just to find authors real names for a one course.

Answer 1

A possible approach is as follows ...

• create an author id based Map instance by passing an accordingly mapped authors array.

• map the courses array course items each into a new item where each course item's id based authors array gets mapped into an author name based array by looking up the latter from the before created authorsMap by an author's id.

const courses = [{
  id: 'de5aaa59-90f5-4dbc-b8a9-aaf205c551ba',
  title: 'JavaScript',
  description: `Lorem Ipsum is simply dummy text`,
  creationDate: '8/3/2021',
  duration: 160,
  authors: [
    '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
    'f762978b-61eb-4096-812b-ebde22838167',
  ],
}, {
  id: 'b5630fdd-7bf7-4d39-b75a-2b5906fd0916',
  title: 'Angular',
  description: `Lorem Ipsumchas been the industry's standard dummy tex`,
  creationDate: '10/11/2020',
  duration: 210,
  authors: [
    'df32994e-b23d-497c-9e4d-84e4dc02882f',
    '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
  ],
}];

const authors = [{
  id: '27cc3006-e93a-4748-8ca8-73d06aa93b6d',
  name: 'Vasiliy Dobkin',
}, {
  id: 'f762978b-61eb-4096-812b-ebde22838167',
  name: 'Nicolas Kim',
}, {
  id: 'df32994e-b23d-497c-9e4d-84e4dc02882f',
  name: 'Anna Sidorenko',
}, {
  id: '095a1817-d45b-4ed7-9cf7-b2417bcbf748',
  name: 'Valentina Larina',
}];

// create an author id based map.
const authorsMap =
  new Map(authors.map(({ id, name }) => [id, name]));

// map each course item and for each course item's
// `authors` array map each author's id into the related
//  author name by looking it up from the `authorsMap`.
console.log(
  courses
    .map(({ authors, ...courseRest }) => ({
      ...courseRest,
      authors: authors.map(authorId =>
        authorsMap.get(authorId)
      ),
    }))
);
console.log(
  'the non mutated original `courses` array ...',
  courses,
);

.as-console-wrapper { min-height: 100%!important; top: 0; }