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.

CodePudding user response：

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 )
  return (
    <div>
      {
        value.names?.map( name => 
        <>
          <input data-profile-id={key} data-key="names" type="checkbox" />
          <label>{name}</label>
        </> 
        )
      }
    </div>
  )
} )

CodePudding user response：

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