1

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!

1
  • Bienvenida a Stack Overflow en español, te sugiero que hagas el recorrido de bienvenida y, de paso, ganar tu primera medalla. También es importante que leas Cómo preguntar y ejemplo mínimo verificable para poder mejorar tus preguntas y que sean bien recibidas por la comunidad, de esta manera favoreces a que los usuarios las respondan y te ayuden Commented el 29 abr. 2019 a las 8:19

1 respuesta 1

2

Podrías recorrer la lista y añadir los padres e hijos a un conjuto (que no admite repeticiones):

const DATOS = [
   {
      "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"
   }
];

const padres = new Set();
const hijos = new Set();

DATOS.forEach(dato => {
  padres.add(dato.Padre);
  hijos.add(dato.Hijo);
});

console.log('Padres');
for (let item of padres) console.log(item);
console.log('Hijos');
for (let item of hijos) console.log(item);

5
  • Hola. He intentado hacer lo que me sugieres pero no sé dónde debería ir eso respecto a mi texto original... Y no quiero un console log, si no que me pinte los resultados en la página... Lo siento, soy nueva en esto y estoy aprendiendo
    – Casandra
    Commented el 29 abr. 2019 a las 14:00
  • DATOS es tu variable submenu, y mi uso de consola es sólo para mostrar lo que queda en los conjuntos. No sé exactamente que HTML pretendes usar para mostrar los datos así que simplemente expuse como obtenerlos, no el cómo mostrarlos Commented el 29 abr. 2019 a las 14:45
  • Hola de nuevo, me ha servido mucho, gracias. ¿Si quisiera mostrar cada padre relacionado con sus hijos cómo debería hacerlo? Me explico... CRM y debajo por ejemplo todos sus hijos agrupados, Permisos y debajo los suyos... Así para cada uno. Gracias de nuevo y perdona las molestias
    – Casandra
    Commented el 6 may. 2019 a las 11:06
  • Crea una nueva pregunta, donde podrás explicar mejor lo que quieres Commented el 6 may. 2019 a las 11:25
  • Ok gracias, así lo haré.
    – Casandra
    Commented el 6 may. 2019 a las 11:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.