Получить конкретные элементы в массиве объектов - PullRequest
Новая
       20

Получить конкретные элементы в массиве объектов

0 голосов
/ 27 июня 2019

Я пытаюсь установить данные своей таблицы с некоторыми, но не со всеми данными из моего массива объектов props.

Я установил массив объектов из своего действия: 

export const getTenants = ({ userID }) => {
  return (dispatch) => {
    const test = [
      { id: 1, fullName: 'Tenant 1', unitName: '101', leaseEndDate: '01/01/2020', tenantEmail: 'none@none.com' },
      { id: 2, fullName: 'Tenant 2', unitName: '102', leaseEndDate: '01/01/2020', tenantEmail: 'none@none.com' },
      { id: 3, fullName: 'Tenant 3', unitName: '103', leaseEndDate: '01/01/2020', tenantEmail: 'none@none.com' },
      { id: 4, fullName: 'Tenant 4', unitName: '104', leaseEndDate: '01/01/2020', tenantEmail: 'none@none.com' },
      { id: 5, fullName: 'Tenant 5', unitName: '105', leaseEndDate: '01/01/2020', tenantEmail: 'none@none.com' },
      { id: 6, fullName: 'Tenant 6', unitName: '106', leaseEndDate: '01/01/2020', tenantEmail: 'none@none.com' },
      { id: 7, fullName: 'Tenant 7', unitName: '107', leaseEndDate: '01/01/2020', tenantEmail: 'none@none.com' },
      { id: 8, fullName: 'Tenant 8', unitName: '108', leaseEndDate: '01/01/2020', tenantEmail: 'none@none.com' },
    ];
    dispatch({
      type: GET_TENANT_DATA,
      payload: test
    });
  };
};

Затем на моей странице я хочу задать для tableData единицу, дату окончания аренды, имя и адрес электронной почты только и в этом порядке. 

this.state = {
          tableHead: ['Unit', 'Lease End Date', 'Tenant', 'Tenant Email'],
          tableData: this.props.data
        };

Есть ли способ сделать это?Спасибо

1 Ответ

1 голос
/ 27 июня 2019

Установите заголовок => сопоставление ключа объекта и выполните цикл tableHead для извлечения необходимых данных. 

this.headerMap = {
  'ID': 'id',
  'Tenant': 'fullName',
  'Unit': 'unitName',
  'Lease End Date': 'leaseEndDate',
  'Tenant Email': 'tenantEmail',
}

this.state = {
  tableHead = ['Unit', 'Lease End Date', 'Tenant', 'Tenant Email'],
  tableData: this.props.data.map(row => tableHead.map(header => row[this.headerMap[header]]))
}

Это создает массив массивов: 

[
  ['101', '01/01/2020', 'Tenant 1', 'none@none.com'],
  ['102', '01/01/2020', 'Tenant 2', 'none@none.com'],
  ['103', '01/01/2020', 'Tenant 3', 'none@none.com'],
  ['104', '01/01/2020', 'Tenant 4', 'none@none.com'],
  ['105', '01/01/2020', 'Tenant 5', 'none@none.com'],
  ['106', '01/01/2020', 'Tenant 6', 'none@none.com'],
  ['107', '01/01/2020', 'Tenant 7', 'none@none.com'],
  ['108', '01/01/2020', 'Tenant 8', 'none@none.com']
]
...