Estoy desarrollando una aplicación en React y tengo un problema. He realizado un "fetch" de un json y solamente soy capaz de mostrar el primero de los elementos de cada tipo. Necesito que se muestren todos los que sean diferentes.
Para ser más concretos necesito que me pinte cada uno de los elementos de "Padre": "CRM", "Permisos" y"Telefonia". Lo mismo para Hijo.
He utilizado .filter y dentro he intentado un findIndex (aquí creo que radica el problema, pero no sé qué utilizar si no).
Esto es parte de mi json. Por GDPR no puedo mostrar datos completos.
[
{
"Id":"114",
"Padre":"CRM",
"Hijo":"Argumentarios"
},
{
"Id":"115",
"Padre":"CRM",
"Hijo":"Argumentarios"
},
{
"Id":"116",
"Padre":"CRM",
"Hijo":"Argumentarios"
},
{
"Id":"44",
"Padre":"Permisos",
"Hijo":"root"
},
{
"Id":"45",
"Padre":"Permisos",
"Hijo":"root"
},
{
"Id":"46",
"Padre":"Permisos",
"Hijo":"root"
},
{
"Id":"47",
"Padre":"Permisos",
"Hijo":"root"
},
{
"Id":"50",
"Padre":"Telefonia",
"Hijo":"Audio"
},
{
"Id":"51",
"Padre":"Telefonia",
"Hijo":"Audio"
},
{
"Id":"52",
"Padre":"Telefonia",
"Hijo":"Configuracion"
},
{
"Id":"70",
"Padre":"Telefonia",
"Hijo":"Rutas"
}
]
A modo de resumen necesito que muestre algo así: Padre: CRM PERMISOS TELEFONÍA Hijo: ARGUMENTARIOS ROOT
import React, { Component } from 'react';
class Nav extends Component{
constructor(props){
super(props)
this.state = {
menuSubmenu:[]
}
}
componentWillMount(){
fetch('FAKE/json_menu.php')
.then(response => response.json())
.then(menuSubmenu =>{
menuSubmenu.forEach(datos => {
let data = {
menu:datos.Padre,
submenu:datos.Hijo,
id:datos.Id,
descripcion:datos.Description,
ulr:datos.URL
}
this.setState({
menuSubmenu:this.state.menuSubmenu.concat([data])
})
})
})
}
render() {
const distinctValues = this.state.menuSubmenu.filter(
({ Padre, Hijo }, index) => {
return this.state.menuSubmenu.findIndex(item => item.Padre === Padre && item.Hijo === Hijo) === index;
});
if (distinctValues.length > 0) {
return(
<div>
{distinctValues.map(datos => <Navegacion key={datos.id} menu={datos.menu} submenu={datos.submenu} descripcion={datos.descripcion}/>)}
</div>
);
}
return (<p>Cargando usuarios...</p>);
}
}
class Navegacion extends Component{
render(){
return (
<nav className="nav">
<div className="menu">
<ul className="list">
<li className="list__item">
<a href="#" title={this.props.url} id={"mn-" + this.props.menu} className="desplegable"><Icon icon="auriculares" className='ico-auriculares'/>{this.props.menu}</a>
<div id="sb-crm" className="submenu">
<h3 className="nav--title"><Icon icon="descargar" className='ico-descargar'/>{this.props.submenu}</h3>
<ul className="list">
<li className="list__item">
<a href={this.props.menu} title={this.props.descripcion}>{this.props.descripcion}</a>
</li>
</ul>
</div>
</li>
</ul>
<div className="content-bnt">
<button id="desplegar" className='btn btn--rounded'>
<Icon icon="flecha" className='ico-flecha'/>
</button>
</div>
</div>
</nav>
)
}
}
export default Nav;
¡Muchas gracias!