How to iterate through the array inside json object

user_15422142 0
Viewed 69

I have s json of the following type:

[
{
    "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"
        }
    ]
}
   ]

I want to get the result as mentioned below. The name should be printed with each and every involvementRoleDesc present in the involvementRole array of each object.

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

I am not able to iterate through the involvementRole array, I get a blank space instead of the involvementRoleDescription value. So Far I have this code:

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>
)

);
reactjs javascript
4 Answers
m.involvementRole.map

Should take an argument that is a function which will be applied to every member of m.involvementRole. Your function is trying to access the involvementRole.involvementRoleDescription property of every item in the m.involvementRole array. But no such property exists.

What you need is more like:

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

You want to first map the "outer" array, and then map the "inner" involvementRole array, then return each row.

Example:

<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>

Edit how-to-iterate-through-the-array-inside-json-object

enter image description here

user_86908570

Replace x.involvementRole.involvementRoleDescription by x.involvementRoleDescription and it should work.

user_98658140

this line is wrong m.involvementRole.map( x => x.involvementRole.involvementRoleDescription you should use this code m.involvementRole.map( x => x.involvementRoleDescription

user_119685090
Related