>

연락처 세부 정보 테이블을 작성하기 위해 작업하는 복잡한 개체가 있지만 중첩 배열에 문제가 있습니다.

중첩 된 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.

구성 요소 :

 const rows = contacts.contactGroups.map(group =>
    <>
    <thead>
        <tr>
          <td>Name</td>
          <td>Member Type</td>
          <td>Telephone</td>
          <td>Email</td>
          <td>Address</td>
        </tr>
      </thead> 
  <tbody>
    <tr>{group.contactGroup}</tr>
    <td>
    <tr>
      {group.contacts.map(contact => <td>
      {contact.fullName}</td>)}
      {group.contacts.map(contact => <td>
      {contact.member}</td>)}
      {/* {group.contacts.map(contact => <td>  
     </td>)}
      {group.contacts.map(contact => 
      <td>{contact.addresses} 
      </td>)}  */}
    </tr>
    </td>
  </tbody>
  </>);

데이터 구조 :

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"
            }
          ]
        }
      ]
    }
  ]
};



  • 답변 # 1

    당신은 단순히 사용할 수 있습니다 forEach 다음과 같이 이해하기가 훨씬 쉬울 것이라고 생각합니다.

    https://codesandbox.io/s/clever-euclid-1bdl5

    export const ContactsGrid = (props: Props) => {
      const { contacts } = props;
      const rows = [];
      contacts.contactGroups.forEach(contactGroup => {
        //First row for group name
        const groupRow = (
          <tr>
            <td>{contactGroup.contactGroup}</td>
          </tr>
        );
        // Data for that group
        const contactRows = [];
        contactGroup.contacts.forEach(contact => {
          const row = (
            <tr>
              <td>{contact.fullName}</td>
              <td>{contact.member}</td>
              <td>
                {contact.phoneNumbers.map(number => (
                  <div>
                    {number.type} : {number.telephoneNumber}
                  </div>
                ))}
              </td>
              <td>{contact.email}</td>
              <td>
                {contact.addresses.map(add => (
                  <div>
                    {add.addressLine1}
                    <br /> {add.addressLine2} <br /> {add.city}, {add.state}
                    <br />
                    {add.zipCode}
                  </div>
                ))}
              </td>
            </tr>
          );
          contactRows.push(row);
        });
        // Add the group row and all the data rows to final rows arr to be rendered
        rows.push(groupRow, ...contactRows);
      });
      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>
      );
    };
    
    
    

    도움이 되었기를 바랍니다 !

  • 답변 # 2

    다른 접근법

    https://codesandbox.io/s/suspicious-leaf-ozwu1?fontsize=14&hidenavigation=1&theme=dark

    interface Row {
      name: string;
      memberOf: string;
      memberType: string;
      telephones: Array<PhoneNumber>;
      email: string;
      addresses: Array<Address>;
    }
    export const ContactsGrid = (props: Props) => {
      const { contacts } = props;
      let rows: Array<Row> = [];
      contacts.contactGroups.forEach(contactG => {
        contactG.contacts.forEach(contact => {
          rows.push({
            name: contact.fullName,
            memberOf: contactG.contactGroup,
            memberType: contact.member,
            telephones: contact.phoneNumbers,
            email: contact.email,
            addresses: contact.addresses
          });
        });
      });
      return (
        <table>
          <thead>
            <tr>
              <td>Name</td>
              <td>Member Type</td>
              <td>Telephone</td>
              <td>Email</td>
              <td>Address</td>
            </tr>
          </thead>
          <tbody>
            {rows.map(row => {
              return (
                <tr>
                  <td>{row.name}</td>
                  <td>{row.memberType + " (" + row.memberOf + ")"}</td>
                  <td>
                    {row.telephones.map(phone => {
                      return <p>{phone.telephoneNumber}</p>;
                    })}
                  </td>
                  <td>{row.email}</td>
                  <td>
                    {row.addresses.map(address => {
                      return <p>{address.addressLine1 + ", " + address.city}</p>;
                    })}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      );
    };
    
    

  • 이전 git를 작성하는 방법 git/info/exclude 파일을 사용하여 무시
  • 다음 python - 아니오에서 굵게 표시된 텍스트 줄만 찾는 방법 이미지