(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

const authorsMap = authors.reduce((acc, author) => ({ ...acc, [author.id]: author.name }), {}); // it faster to find a value in a Map than searching in Array

const coursesWithAuthors = courses
.map(course => ({ ...course, authors: course.authors.map(id => authorsMap[id]) }));

Answer 2

A possible approach is as follows ...

• create an author id based Map instance by passing an accordingly map ped 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; }

Answer 3

I used a for loop and the Array.prototype.find() function. Please see snippet below.

 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', ], }, ]; 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', }, ]; const COURSE = courses[0] const authorsDeHash = (authorsHashed, authors) => { for (let i = 0; i < authorsHashed.length; i++) { let author = authors.find(e => e.id === authorsHashed[i]); console.log(author.name) } }; authorsDeHash(COURSE.authors, authors);

Answer 4

So simply I've done it that way. The main problem was in the loop, lol. Instead of (let i of j) I used (let i in j).

const authorsDeHash = (authorsHashed, authorsOrigin) => {
        const arr = [];
        for (let i in authorsHashed)
            arr.push(authorsOrigin.find((el) => el.id === authorsHashed[i]).name);
        return arr;
    };
    const authorsArray = authorsDeHash(course.authors, authors);

    const printAuthors = (arr) => {
        const obj = { title: '', authors: '' };
        if (arr.length === 1) {
            obj.title = 'Author:';
            obj.authors = arr[0];
        } else {
            obj.title = 'Authors:';
            obj.authors = `${arr.join(', ')}`;
        }
        return obj;
    };
    const authorsObj = printAuthors(authorsArray);

Thanks for the answers :)