How to iterate through the array inside json object

Question

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

);

Drew Reese · Accepted Answer · 2021-11-17 07:38:33Z

1

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>

answered Nov 17, 2021 at 7:38

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

inteoryx · Accepted Answer · 2021-11-17 07:33:40Z

1

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

answered Nov 17, 2021 at 7:33

inteoryx

8055 silver badges10 bronze badges

1 Comment

MinMin240 Over a year ago

I tried this and it's giving all the three roles in the same line but I want them in separate lines along with the name

Sylvain · Accepted Answer · 2021-11-17 07:35:53Z

0

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

answered Nov 17, 2021 at 7:35

Sylvain

5392 gold badges8 silver badges17 bronze badges

Comments

MohammadHossein · Accepted Answer · 2021-11-17 07:56:55Z

0

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

answered Nov 17, 2021 at 7:56

MohammadHossein

373 bronze badges

Collectives™ on Stack Overflow

How to iterate through the array inside json object

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related