Render values from array of objects which contains an object (React, Typescript)

Question

I'm trying to print, for example, the Names on some in my TSX. Data has this form :

const targets: {
    [key: string]: {
        [key: string]: string[]
    }
}[] = [
    {
        '0665496f-7a4e-46b6-a922-2d42ce205c03': {
            names: ['Hello', 'World'],
            dob: ['1971-09-01'],
        },
    },
    {
        '2679d2b8-9c25-44e3-bfad-3e2ef6b93b94': {
            names: ['Jordan'],
        },
    },
    {
        '8a8b7630-5bc8-443e-a88d-c1601659b39e': {
            names: ['John Doe'],
        },
    },
]

How can I do it the more efficient way ? The code I tried is very complicated, I'm pretty sure I'm doing it wrong...

Here's what I need for output, for example for the first object :

<div>
    <input data-profile-id="0665496f-7a4e-46b6-a922-2d42ce205c03" data-key="names" type="checkbox" />
    <label>Hello</label>
</div>
<div>
    <input data-profile-id="0665496f-7a4e-46b6-a922-2d42ce205c03" data-key="names" type="checkbox" />
    <label>World</label>
</div>

I need this infos in dataset to handle click on those inputs.

Thanks a lot.

Ben · Accepted Answer · 2022-01-28 17:10:51Z

2

You can try something like this, target is an array, map it's objects inside, get the key and value of each object.

Use the key to set it in data-profile-id while the value holds another object which contains names and dob. Map the array of names to get all the names inside the array.

targets.map( target => {
  const [key, value] = Object.entries( target )[0]
  return (
    <div>
      {
        value.names?.map( name => 
        <>
          <input data-profile-id={key} data-key="names" type="checkbox" />
          <label>{name}</label>
        </> 
        )
      }
    </div>
  )
} )

edited Jan 28, 2022 at 17:10

answered Jan 28, 2022 at 12:16

Ben

6784 silver badges13 bronze badges

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

2 Comments

Touk Over a year ago

Thanks it helped a lot ;) Only a [0] was missing at the end of line 2, like this : const [key, value] = Object.entries(target)[0]

Ben Over a year ago

My apologies, you are correct. I have fixed it like you said, thank you.

stacj · Accepted Answer · 2022-01-28 12:15:12Z

For js/ts-only answer you might want to check this out:

const d = [
    {
        '0665496f-7a4e-46b6-a922-2d42ce205c03': {
            names: ['Hello', 'World'],
            dob: ['1971-09-01'],
        },
    },
    {
        '2679d2b8-9c25-44e3-bfad-3e2ef6b93b94': {
            names: ['Jordan'],
        },
    },
    {
        '8a8b7630-5bc8-443e-a88d-c1601659b39e': {
            names: ['John Doe'],
        },
    },
];

const create = (id, txt) => {
  const d = document.createElement("div"),    // creating outer div
        i = document.createElement("input"),  // creating input
        l = document.createElement("label");  // creating label
  l.innerText = txt;
  i.setAttribute("data-profile-id", id);      // set data.id
  i.setAttribute("data-key", "names");        // ...
  i.type = "checkbox";
  d.appendChild(i);
  d.appendChild(l);
  return d;                                   // return
}
d.forEach(e => Object.keys(e).forEach(a => e[a].names.forEach(b => document.body.appendChild(create(a, b)))));   // loop over array and add to body

div {
  border: 1px solid black;
  margin-top: 20px;
}

Collectives™ on Stack Overflow

Render values from array of objects which contains an object (React, Typescript)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related