#javascript #reactjs
#javascript #reactjs
Вопрос:
У меня есть 2 массива, первый содержит сведения о компании, второй — сведения о человеке. Я хочу отобразить внутри таблицы каждого человека из массива Company.
//Table Data
const **CompanyData** = [
{id: 1, name: 'Company1', phone: 'Phone1', address: 'Miron1', persons: [1,2]},
{id: 2, name: 'Company2', phone: 'Phone2', address: 'Miron2', persons: [1]},
{id: 3, name: 'Company3', phone: 'Phone3', address: 'Miron3'}
]
//Person Data
const **PersonData** = [
{id: 1, firstName: 'a', lastName: 'b', phone: 'phone1', address: 'Miron1'},
{id: 2, firstName: 'c', lastName: 'd', phone: 'phone2', address: 'Miron2'},
{id: 3, firstName: 'e', lastName: 'f', phone: 'phone3', address: 'Miron3'}
]
//Filter Person
CompanyData.forEach((company) => {
if(company.persons) {
company.persons = company.persons.map((member) => {
return PersonData.filter((person) =>{
return person.id === member
})
})
}
})
Как я могу отобразить внутри таблицы в определенной строке любую информацию о человеке из массива Company.
Комментарии:
1. Как вы хотите отобразить данные? Потому что здесь есть много вариантов… Например, вы можете либо отобразить данные в таблице, расширив столбцы, чтобы отобразить каждого человека, принадлежащего к компании, или просто показать информацию о человеке в плавающем всплывающем окне при наведении курсора мыши на строку компании. Если вы укажете немного больше, я смогу написать правильный ответ.
2. Я хочу отобразить информацию о каждом человеке внутри строки таблицы. Вот так. <td> {person.FirstName} и т.д…
Ответ №1:
Я полагаю, что ваша функция фильтрации не может работать, поэтому, пожалуйста, взгляните на мой фрагмент ниже:
const people = companyData
.filter((company) => company.persons)
.map((el) =>
el.persons.map(
(el, i) => el === personData[i].id amp;amp; <div key={i}>{personData[i].firstName} {personData[i].lastName}</div>
)
)
И поместите {people}
в свой метод рендеринга.
Я отобразил только имя и фамилию. Если вы хотите, вы можете создать th, tb и так далее или сделать то же самое с помощью divs и повеселиться с css. Помните, что таблица не реагирует, поэтому я рекомендую использовать некоторые divs.
Ответ №2:
Пожалуйста, посмотрите мое решение. Это один из способов выполнить эту задачу.
Я рекомендую вам использовать функциональное программирование, чтобы поддерживать код в чистоте и порядке. Вы изменили данные внутри массива «CompanyData», что может затруднить отладку позже.