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.
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]) }));
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; }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);