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.
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>
)
} )
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 bodydiv {
border: 1px solid black;
margin-top: 20px;
}