tengo estos datos:
const data = [ { _id: '1', status: 'active', user: { email: 'one@mail.com', provider: 'google', profile: { image: 'https://example.com/image1.jpg', }, }, }, { _id: '2', status: 'inactive', user: { email: 'two@mail.com', provider: 'github', profile: { image: 'https://example.com/image2.jpg', }, }, }, ] const head = ['_id', 'status', 'email', 'image'] const body = ['_id', 'status', 'user.email', 'user.profile.image']Quiero mostrar en la tabla dinámicamente solo mostrar la cadena en la matriz del cuerpo.
Probé y funcionó _id y estado pero no la cadena que contiene el punto
Esto es lo que he probado:
data.map((item) => ( <tr key={item._id}> {body.map((i, index) => ( <td key={index}>{item[i]}</td> ))} </tr> ))Si los datos de su cuerpo no son dinámicos, puede hacer:
data.map((item) => ( <tr key={item._id}> <> <td key={index}>{item._id}</td> <td key={index}>{item.status}</td> <td key={index}>{item.user.email}</td> <td key={index}>{item.user.profile.image}</td> <> </tr> ))más puedes usar
const deeper = (data, array) => { if(array.length > 1){ return deeper(data[array[0]], array.slice(1, array.length)) } else { return data[array[0]] } }con
data.map((item) => ( <tr key={item._id}> {body.map((i, index) => ( <td key={index}>{deeper(item, i.split('.'))}</td> ))} </tr> ))Algo como eso
aquí está mi manera de lograr el resultado de su deseo.
usar esta función
function getDeepObjValue (item, s) { return s.split('.').reduce((p, c) => { p = p[c]; return p; }, item); };úsalo así
data.map((item) => { return ( <tr key={item._id}> {body.map((keys, i) => { return <td key={i}>{getDeepObjValue(item, keys)}</td>; })} </tr> ); })y si quieres ver demo haz clic aquí