Estoy tratando de imprimir, por ejemplo, los nombres de algunos en mi TSX. Los datos tienen esta forma:
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'], }, }, ]¿Cómo puedo hacerlo de la manera más eficiente? El código que probé es muy complicado, estoy bastante seguro de que lo estoy haciendo mal...
Esto es lo que necesito para la salida, por ejemplo, para el primer objeto:
<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>Necesito esta información en el conjunto de datos para manejar el clic en esas entradas.
Muchas gracias.
Puede probar algo como esto, el objetivo es una matriz, mapear sus objetos dentro, obtener la clave y el valor de cada objeto.
Use la clave para configurarlo en data-profile-id mientras que el valor contiene otro objeto que contiene nombres y dob . Asigne la matriz de nombres para obtener todos los nombres dentro de la matriz.
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> ) } )Para la respuesta js/ts-only, es posible que desee consultar esto:
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; }