Data Format, how to map this object?

I’d like to map out an array from a backend API call.

This comes from a schema which currently has the format of

teamMemberDetails: {
            member_v2: {
                memberEmail: [String], default: [],
                memberName: [String], default: [],
                memberID: [String], default: [],
                memberRole: [String], default: ""
            },
        },

Within this, I have an object, however it looks like this for example:

        "member_v2": {
            "memberEmail": [
                "[e-mail]",
                "[e-mail]"
            ],
            "memberID": [
                "62fe3c888e2776ef3c1a010f",
                "6301dcd00e05d7cd322cc45b"
            ],
            "memberName": [
                "Natx Trial",
                "sebaxo"
            ],
            "memberRole": [
                "QA Tester",
                "trialer"
            ]
        },

Given the above, i’d like to map through this data on a component. I have tried to store it into a const, then map however it will error out. For example:

const CompanyUserMembers = () => {

    const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2)

    console.log(companyFull)

  return (
    <GeneralContainer>
      {companyuserMembers.map(member=>(
        <TeamMemberCard member={companyFull} key={companyFull.memberID}/>
      ))}
    </GeneralContainer>
  )
}

export default CompanyUserMembers

This is then passed to a component which displays each user in the card. What am I doing wrong and how should i reformat?

Answer

Hi the first thing i can notice from your code you declare “comapnyFull” and you are iterating over “companyMembers”

the code should be:

const CompanyUserMembers = () => {

    const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2)

    console.log(companyFull)

  return (
    <GeneralContainer>
      {companyFull.memberName.map(member=>(
        <TeamMemberCard member={member} key={member}/>
      ))}
    </GeneralContainer>
  )
}

export default CompanyUserMembers

however i’m not sure that is what you are looking for, your arrays access should be:

companyFull["memberName"].map(...)    // Would give you ["Natx Trial", "sebaxo"]
companyFull["memberID"].map(...)   // Would give you ["62fe3c888e2776ef3c1a010f","6301dcd00e05d7cd322cc45b"]

or

companyFull.memberName.map(...)    // Would give you ["Natx Trial", "sebaxo"]
companyFull.memberID.map(...)   // Would give you ["62fe3c888e2776ef3c1a010f","6301dcd00e05d7cd322cc45b"]

if you want to iterate over one param, and get something from another param you do it like that:

{companyFull["memberName"].map((name, i) => (
    <TeamMemberCard member={name} key={companyFull["memberID"][i]}/>
))}

Hope it makes it more clear

UPDATE

Based on comments member_v2 remap to array:

const member_v2 = {
    "memberEmail": [
        "[e-mail]",
        "[e-mail]"
    ],
    "memberID": [
        "62fe3c888e2776ef3c1a010f",
        "6301dcd00e05d7cd322cc45b"
    ],
    "memberName": [
        "Natx Trial",
        "sebaxo"
    ],
    "memberRole": [
        "QA Tester",
        "trialer"
    ]
}

const CompanyUserMembers = () => {
  const members = useMemo(() => {
    const array = [];
    for (let i = 0; i < member_v2.memberEmail.length; i++)
      array.push({memberEmail:member_v2.memberEmail[i], memberID: member_v2.memberID[i], memberName: member_v2.memberName[i],memberRole:member_v2.memberRole[i]});
    return array;
  }, [member_v2])

  console.log(members)
  ...
  return (
     {members.map(member => (...))}
  )
}

using destructure and combining in compcode

const CompanyUserMembers = () => {
   const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2)
   const { memberEmail, memberID, memberName, memberRole} = companyFull;

   return (
   ...
   {memberEmail.map((_, index) => (
       <TeamMemberCard memberEmail={memberEmail[index]} key={memberID[index]} memberName={memberName[index]} memberRole={memberRole[index]}/>
    ))}
   ...
   )
}