0

Quiero filtrar los resultados de mis 2 peticiones que devuelven un objeto JSON

primer objeto "Preguntas"

{
"id" : 1
"pregunta" : ¿Qué animal representa más tu personalidad?
}

Segundo objeto "Respuestas"

 {
        "id" : "1",
        "id_pregunta" : "1",
        "opcion" : "Oso anteojos"
 },

Este es el resultado que tengo señalo el id correspondiente de cada objeto JSON

Este es el resultado que obtengo de las Preguntas introducir la descripción de la imagen aquí

quiero obtener un resultado que agrupe las opciones dependiendo de las preguntas Ejemplo : introducir la descripción de la imagen aquí

este es mi componete

 render(){
        return(

            <div className="cuestionario">    

               <span>{this.props.item.id}</span><span> {this.props.item.opcion}</span> 
               {this.props.item.id_pregunta} {this.props.item.pregunta} 
            </div>

           );
        } 

en este componetente le mando los props

render(){
  return (
        <div className="app container">
          <div className="config-logo">
                    <img src={LogoBoxi} />
                </div>
          {this.state.opciones.map((opcion, key) =>  
            <Preguntas
             item={opcion} key={key}
            />
          )}
          {this.state.preguntas.map((pregunta, respuesta) =>  
            <Preguntas
             item={pregunta} key={respuesta}
            />
          )}
         <div className="BotonesSeleccion">        
                    <input type="button" value="Volver" />
                    <input type="button" value="Siguiente" />
                </div> 
          </div>
      );

      }
2
  • Pero no tendrás unas posibles respuestas para esa pregunta? Es decir la pregunta con el id 1 tendrá X respuestas? Entonces supongo que es eso lo quieres filtrar. Las opciones de la pregunta con el id X? No entendí muy bien tu pregunta.
    – MitaCloud
    Commented el 21 feb. 2020 a las 13:30
  • la posible respuesta es la imagen de ejemplo que puse, no he podido logar hacer eso Commented el 21 feb. 2020 a las 15:36

1 respuesta 1

1

Suponiendo que los objetos de las preguntas y de las respuestas te vengan en un array, yo usaría un reducer:

const preguntas = [
    {
        "id" : 1,
        "pregunta" : "¿Qué animal representa más tu personalidad?"
    },
    {
        "id" : 2,
        "pregunta" : "¿Qué animal representa menos tu personalidad?"
    },
];
const respuestas = [
    {
        "id" : 1,
        "id_pregunta" : 1,
        "opcion" : "Oso anteojos"
    },
    {
        "id" : 1,
        "id_pregunta" : 2,
        "opcion" : "Ornitorrinco"
    },
    {
        "id" : 1,
        "id_pregunta" : 1,
        "opcion" : "Gato"
    },
];

const preguntaYRespuestas = preguntas.reduce((acc, elemento)=>{
    const respuestasFiltradas = respuestas.filter((resp)=>elemento.id === resp.id_pregunta);
    return [...acc, { ...elemento, respuestas: respuestasFiltradas }];
}, []);

console.log(preguntaYRespuestas);

Y tus dos componentes, se podría reducir a uno:

render(){
    return (
        <div className="App">
            <div>
                {
                    this.state.preguntasYRespuestas.map((pregunta)=>(
                      <div>
                        <div key={pregunta.id}>{pregunta.pregunta}</div>
                        <div>
                            {
                                pregunta.respuestas.map((respuesta)=>(
                                    <div key={`${pregunta.id}_${respuesta.id}`}>{respuesta.opcion}</div>    
                                ))
                            }
                        </div>
                      </div>
                    ))
                }
            </div>
        </div>
        );
  
    }

1
  • Muchas gracias, se que me servira de mucho tu respuesta Commented el 21 feb. 2020 a las 16:59

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.