Блог

Главная - Вопросы по программированию - Отображение внутри табличного пользователя из arrray

Отображение внутри табличного пользователя из arrray

#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:

Пожалуйста, посмотрите мое решение. Это один из способов выполнить эту задачу.

https://codesandbox.io/s/awesome-mcnulty-kimpk ?размер шрифта = 14 amp; скрытая навигация = 1 amp; тема = темный

Я рекомендую вам использовать функциональное программирование, чтобы поддерживать код в чистоте и порядке. Вы изменили данные внутри массива «CompanyData», что может затруднить отладку позже.