CODEWITHSUNDEEP
javascriptarraysreactjstypescriptobject
Touk
Touk

Reputation: 129

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

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.

Upvotes: 0

Views: 3215

Answers (2)

Ben
Ben

Reputation: 668

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

Upvotes: 2

stacj
stacj

Reputation: 1120

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

Upvotes: 0

Related Questions