홈>
연락처 세부 정보 테이블을 작성하기 위해 작업하는 복잡한 개체가 있지만 중첩 배열에 문제가 있습니다.
중첩 된 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
-
답변 # 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> ); };
관련 자료
- reactjs - Jest 상태에서 중첩 된 객체의 부분 값을 가져 오는 방법
- javascript - 반응에서 중첩 된 개체에 대해지도 기능을 수행 할 수 없습니다
- PHP 다차원 연관 배열과 유사한 자바 스크립트 동적 객체
- javascript - 중첩 된 JSON 개체의 출력이 정의되지 않았습니다
- javascript - 키로 깊게 중첩 된 객체의 경로를 얻습니다
- javascript - 중첩 된 개체 속성을 기준으로 개체 배열 정렬
- javascript - 객체가 중첩되지 않도록 배열 수정
- javascript - 다른 개체 내부의 모든 중첩 개체에 새 키/값을 동적으로 추가하는 방법은 무엇입니까?
- jq를 사용하여 가능한 null 값으로 중첩 된 JSON 개체를 해제 하시겠습니까?
- javascript - 객체의 중첩 배열 내부에 객체 값을 채우는 방법은 무엇입니까?
- javascript - 중첩 된 개체에서 반복
- reactjs - 확산 기능으로 React에서 중첩 된 객체를 삭제하는 방법
- javascript - 중첩 된 개체 속성의 최소값 찾기
- javascript - 주어진 값을 중첩 배열에 포함하는 객체에서 항목을 가져 오는 방법
- mongoDB objectID가 지정된 중첩 된 graphql 객체 데이터 유형을 표시하는 방법은 무엇입니까?
- javascript - 깊이 중첩 된 거대한 개체 내부의 각 개체에 새 키/값 추가
- typescript - 템플릿 리터럴 유형의 중첩 된 개체에 대한 유효한 경로 만 허용하려면 어떻게해야합니까?
- javascript - 개체의 중첩 개체를 업데이트하기 위해 개체 할당
- javascript - 문자열 배열을 중첩 된 객체로 변환
- javascript - 중첩 된 객체와 배열이있는 객체의 각 속성 값을 얻는 방법은 무엇입니까?
당신은 단순히 사용할 수 있습니다
forEach
다음과 같이 이해하기가 훨씬 쉬울 것이라고 생각합니다.https://codesandbox.io/s/clever-euclid-1bdl5
도움이 되었기를 바랍니다 !