Estoy creando un componente de tarjeta de cursos en la aplicación React. Tengo dos matrices con los datos para llenar estas tarjetas.
LA VARIEDAD DE OBJETOS DE LOS CURSOS:
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', ], }, ];LA VARIEDAD DE OBJETOS DEL AUTOR:
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', }, ];MIS INTENTOS DE EMPAREJAR Y "DESHASH" A LOS AUTORES:
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: dado que ya estoy pasando UN solo curso del componente principal, no necesito buscar el valor en toda la matriz de "cursos". Básicamente, solo tengo que encontrar los nombres reales de los autores para un curso.
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]) }));Un posible enfoque es el siguiente...
cree una instancia de mapa basada en la identificación del autor pasando una matriz de authors del map .
map los elementos del curso de la matriz courses a un nuevo elemento donde la matriz de authors basada en la identificación de cada elemento del curso se asigna a una matriz basada en el nombre del autor al buscar esta última en el mapa de autores creado authorsMap por la identificación de un autor.
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; }Usé un bucle for y la función Array.prototype.find() . Por favor, vea el fragmento a continuación.
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);