Пытаясь отобразить элементы из объекта вложенных подмассивов в ячейку таблицы HTML, не знаете, как добраться до самых глубоких подмассивов.

Question

У меня есть компонент React / TypeScript, который я создаю и который содержит таблицу HTML для контактных данных.

Я пытаюсь отобразить ответ API на ячейки в таблице и динамически заполнить строки для каждого контакта и их детали. Есть два массива для телефонных номеров и адресов , которые вложены глубоко в объект, и я не могу понять, как их перебирать вместе с остальными данными в одном go.

Сначала я пытался использовать вложенные циклы, но я столкнулся со стеной, когда попал на эти два элемента из-за их положения в объекте данных.

Затем я попытался использовать .map () в середине цикла для , но я столкнулся с ошибкой TypeScript, утверждающей, что элемент, который я пытаюсь отобразить, может быть нулевым.

I Я думал об итерации по телефонным номерам и массивам адресов по отдельности, а затем вставлял их в соответствующие ячейки для каждого контакта, но я не могу понять, как это сделать, когда я использую отдельные циклы for для заполнения других ячеек.

Ожидаемый результат:

Name | Member | Telephone | Email | Addresses

Ben B| Friend | 610-535-1234 | ben@gmail.com | 123 Fiction Drive,Denver
                215-674-6789                   234 Dreary Ln,Seattle 

Alice | Family| 267-333-1234 | ally@aim.com  | 437 Chance St, Pitts.

Я создал CodeSandbox и удалил текущий компонент и пример структуры данных ниже. Для CodeSandbox он в данный момент загружается, но как только вы раскомментируете эти строки, вы увидите ошибку

<td>{contacts.contactGroups[i].contacts[j].phoneNumbers}</td>

<td>{contacts.contactGroups[i].contacts[j].addresses}</td>

Current Component

import React from "react";
import { Contacts } from "./contact-types";

type Props = {
  contacts: Contacts;
};

export const ContactsGrid = (props: Props) => {

  const { contacts } = props;

  const rows = [];

  for (let i = 0; i < contacts.contactGroups.length; i++) {
    rows.push(
      <tr>
        <td>{contacts.contactGroups[i].contactGroup}</td>
      </tr>
    );
    for (let j = 0; j < contacts.contactGroups[i].contacts.length; j++) {
      rows.push(
        <tr>
          <td>{contacts.contactGroups[i].contacts[j].fullName}</td>
          <td>{contacts.contactGroups[i].contacts[j].member}</td>
          {/* <td>{contacts.contactGroups[i].contacts[j].phoneNumbers}</td> */}
          <td>{contacts.contactGroups[i].contacts[j].email}</td>
          {/* <td>{contacts.contactGroups[i].contacts[j].addresses}</td> */}
        </tr>
      );
    }
  }

  return (
    <table>
      <thead>
        <tr>
          <td>Name</td>
          <td>Member Type</td>
          <td>Telephone</td>
          <td>Email</td>
          <td>Address</td>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
};

Current Data Structure

export default {
  count: 1,
  contactGroups: [
    {
      contactGroup: "Family",
      count: 1,
      contacts: [
        {
          member: "Uncle",
          fullName: "BENJAMIN BILLIARDS",
          lastName: "BILLIARDS",
          firstName: "BENJAMIN",
          email: "shark@billiards.com",
          phoneNumbers: [
            {
              telephoneNumber: "123-456-7899",
              type: "mobile"
            },
            {
              telephoneNumber: "610-555-7625",
              type: "work"
            }
          ],
          addresses: [
            {
              addressLine1: "123 FAMILY ST",
              addressLine2: "APT 1208",
              city: "ATLANTA",
              state: "GEORGIA",
              zipCode: "12345"
            },
            {
              addressLine1: "456 WORKING BLVD",
              addressLine2: "",
              city: "ATLANTA",
              state: "GEORGIA",
              zipCode: "12345"
            }
          ]
        }
      ]
    },
    {
      contactGroup: "Friends",
      count: 1,
      contacts: [
        {
          member: "School Friend",
          fullName: "HANS ZIMMER",
          lastName: "ZIMMER",
          firstName: "HANS",
          email: "hans@pirates.com",
          phoneNumbers: [
            {
              telephoneNumber: "267-455-1234",
              type: "mobile"
            }
          ],
          addresses: [
            {
              addressLine1: "789 FRIEND ST",
              addressLine2: "",
              city: "SAN DIEGO",
              state: "CALIFORNIA",
              zipCode: "67890"
            },
            {
              addressLine1: "234 CANARY ST",
              addressLine2: "",
              city: "SEATTLE",
              state: "WASHINGTON",
              zipCode: "67890"
            }
          ]
        }
      ]
    }
  ]
};

Answer 1

Использовать вложенные map:

const rows = contacts.contactGroups.map(group => <tr>
  <td>{group.contactGroup}</td>
  <td>
  <table>
    {group.contacts.map(contact => <tr>
      <td>{contact.fullName}
    </tr>}
  </table>
  </td>
</tr>;