如何遍历数组里面的json object

Question

我有以下类型的 json：

[
{
    "insInvolvementId": "3C5ABFBAD0701CD9",
    "clientId": "C3110828C5DFF28A",
    "client": {
        "firstName": "JAMCN",
        "middleName": null,
        "lastName": "PERGY",
        "icsPartyId": "005569150400300"
    },
    "involvementRole": [
        {
            "involvementRoleId": "13F981C9C8DAAABC",
            "insInvolvedId": "3C5ABFBAD0701CD9",
            "involvementRole": "DRVR",
            "involvementRoleDescription": "Driver"
        },
        {
            "involvementRoleId": "012B3A9B1868F472",
            "insInvolvedId": "3C5ABFBAD0701CD9",
            "involvementRole": "OWNR",
            "involvementRoleDescription": "Owner"
        },
        {
            "involvementRoleId": "5F9A6648EC1C74AE",
            "insInvolvedId": "3C5ABFBAD0701CD9",
            "involvementRole": "PIN",
            "involvementRoleDescription": "Insured"
        }
    ]
},
{
    "insInvolvementId": "56A463A6A1BE49A4",
    "clientId": "8D15AECA4B8E6161",
    "client": {
        "firstName": "DANNY",
        "middleName": null,
        "lastName": "BROWN",
        "icsPartyId": "021166740400300"
    },
    "involvementRole": [
        {
            "involvementRoleId": "8EA862DB893DB022",
            "insInvolvedId": "56A463A6A1BE49A4",
            "involvementRole": "OWNR",
            "involvementRoleDescription": "Owner"
        },
        {
            "involvementRoleId": "EFCCBE3B7C57ACE4",
            "insInvolvedId": "56A463A6A1BE49A4",
            "involvementRole": "DRVR",
            "involvementRoleDescription": "Driver"
        },
        {
            "involvementRoleId": "1E0221EB38D4171D",
            "insInvolvedId": "56A463A6A1BE49A4",
            "involvementRole": "CMT",
            "involvementRoleDescription": "Claimant"
        }
    ]
}
   ]

我想得到如下所述的结果。 该名称应该与每个 object 的 involvementRole 数组中存在的每个 involvementRoleDesc 一起打印。

JAMCN PERGY  Driver
JAMCN PERGY  Owner
JAMCN PERGY  Insured
DANNY BROWN  Owner
DANNY BROWN  Driver
DANNY BROWN  Insured

我无法遍历 involvementRole 数组，我得到一个空格而不是 involvementRoleDescription 值。 到目前为止，我有这段代码：

const Checkbox = (props) => {
const classes = useStyles();
const checkbox = props.list.map((m) => (
  
  
  <div>
      <tbody style={{ width:'100%' }}>
          <tr>
  <td style={{width:'60px'}}> <input type="checkbox"  onClick={() => props.handleCheckboxChange(m)} /></td> 
   <td style={{width:'250px'}}> {m.involvementRole.map( x => x.involvementRole.involvementRoleDescription)} </td>  
  <td style={{width:'250px'}}>{m.client.firstName+ ' '+m.client.lastName }</td>
    </tr>
    </tbody>
</div>
)

);

Answer 1

m.involvementRole.map

应该采用一个参数 function，它将应用于 m.involvementRole 的每个成员。 您的 function 正在尝试访问 m.involvementRole 数组中每个项目的 involvementRole.involvementRoleDescription 属性。 但是不存在这样的属性。

你需要的更像是：

{m.involvementRole.map( x => x.involvementRoleDescription)}

Answer 2

您想要首先 map “外部”数组，然后 map “内部” involvementRole数组，然后返回每一行。

例子：

<table>
  <tbody style={{ width: "100%" }}>
    {props.list.map(m => {
      return m.involvementRole.map(role => (
        (
          <tr>
            <td style={{ width: "60px" }}>
              {" "}
              <input
                type="checkbox"
                onClick={() => props.handleCheckboxChange(m)}
              />
            </td>
            <td style={{ width: "250px" }}>
              {m.client.firstName + " " + m.client.lastName}
            </td>
            <td style={{ width: "250px" }}>
              {role.involvementRoleDescription}
            </td>
          </tr>

        )
      ))
    })}
  </tbody>
</table>

Answer 3

将 x.involvementRole.involvementRoleDescription 替换为 x.involvementRoleDescription ，它应该可以工作。

Answer 4

这m.involvementRole.map( x => x.involvementRoleDescription是m.involvementRole.map( x => x.involvementRole.involvementRoleDescription的