मेरे पास एक जटिल वस्तु है जिसके साथ मैं संपर्क विवरण की एक तालिका बनाने के लिए काम कर रहा हूं, लेकिन मैं नेस्टेड सरणी के साथ समस्याओं में भाग रहा हूं।

मैंने लूप के लिए नेस्टेड करने की कोशिश की और हाल ही में एक नेस्टेड .map() दृष्टिकोण पर चला गया, लेकिन मैं अभी भी एक दीवार से टकरा रहा हूं, जहां मैं वस्तुओं के अंतिम दो सरणियों (फोन नंबर और पते) तक नहीं पहुंच सकता। उन्हें भी प्रिंट करने के लिए और मैं अपने पहियों को पूरी तरह से घुमा रहा हूं।

मैं इस पर एक दिन से अधिक समय से काम कर रहा हूं और मैं पूरी तरह से इस बात पर अडिग हूं कि इस तक कैसे पहुंचा जाए।

Edit crazy-edison-6l6ue

अपेक्षित उत्पादन:

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
Josh 30 अप्रैल 2020, 19:27

2 जवाब

सबसे बढ़िया उत्तर

आप बस 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>
  );
};

उम्मीद है ये मदद करेगा !

1
Hemant Parashar 30 अप्रैल 2020, 19:51

आपकी अपेक्षित आउटपुट तालिका के अनुसार एक और तरीका

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>
  );
};
0
acbay 30 अप्रैल 2020, 20:18