Tengo una serie de objetos para un cuestionario como este.
[ { answer: "Patience" question: "Name a GNR song..." questionId: 13 questiontype: "text" userId: 1 }, { answer: "ABC" question: "Select three MJ songs..." questionId: 14 questiontype: "checkbox" userId: 1 }, { answer: "Thriller" question: "Name three MJ songs..." questionId: 14 questiontype: "checkbox" userId: 1 } ]Lo que estoy tratando de hacer es mostrarlos en una página. Así que en este momento estoy haciendo algo como esto
{quizData.map((item, index) => { return ( <div key={index}> <Col xs={12}> <p className="text-start quiz-text"> <strong> Question {item.question} </strong> </p> </Col> <Col xs={12}> <p className="text-start argent c-font quiz-text">{item.answer}</p> </Col> </div> ); })}El problema es que esto mostrará una nueva fila de preguntas para cada respuesta. Entonces, para los datos anteriores, veo algo como esto
Name a GNR song Patience Select 3 MJ songs ABC Select 3 MJ songs ThrillerLo que estoy tratando de hacer es tener solo una pregunta, pero si esa pregunta tiene múltiples respuestas, mostrarlas como parte de esa pregunta. Así que lo anterior sería algo como
Name a GNR song Patience Select 3 MJ songs ABC ThrillerSupongo que tengo que hacer coincidir el questionId de alguna manera, pero no estoy seguro de cómo puedo lograr esto dentro de mi mapa.
Cualquier consejo apreciado.
Gracias
Lo que intenta hacer es agrupar cada objeto de la matriz por questionId. Entonces, para hacer eso, puede implementar una versión estándar de groupBy() como se menciona en esta respuesta de la siguiente manera
const groupBy = (list, keyGetter) => { const map = new Map(); list.forEach((item) => { const key = keyGetter(item); const collection = map.get(key); if (!collection) { map.set(key, [item]); } else { collection.push(item); } }); return map; }Después de eso, simplemente puede usarlo como
// list of your question objects var questions = [ { answer: "Patience", question: "Name a GNR song...", questionId: 13, questiontype: "text", userId: 1, }, { answer: "ABC", question: "Select three MJ songs...", questionId: 14, questiontype: "checkbox", userId: 1, }, { answer: "Thriller", question: "Name three MJ songs...", questionId: 14, questiontype: "checkbox", userId: 1, } ]; // groupBy function here shall return a Map object having questionId as key and // list of objects having that questionId as value as specified in callback passed in const myMap = groupBy(questions, x => x.questionId) // Now you can simply iterate over the myMap object by using forEach myMap.forEach( group => { // group is the list of objects having same questionId console.log(group[0].question); group.map( // you can simply map your group like this object => console.log(" ", object.answer) ) } ) // OUTPUT: // Name a GNR song... // Patience // Select three MJ songs... // ABC // ThrillerPrimero puede obtener ID de preguntas únicas en una matriz de la siguiente manera usando Map Constructor:
var uniqueQIDs = [...new Map(data.map(obj => [obj.questionId, obj])).values()].map(obj => obj.questionId);Luego, puede recorrer cada ID de pregunta y filtrar sus datos originales en función de eso de la siguiente manera:
{uniqueQIDs.map((qID, index) => { return ( <div key={index}> <Col xs={12}> <p className="text-start quiz-text"> <strong> Question {qID} </strong> </p> </Col> <Col xs={12}> {quizData.filter(obj => obj.questionId === qID).map(obj => { return <p>{ obj.answer }</p> })} </Col> </div> ); })}Puede usar array.filter() o for loop para modificar la matriz antes de la implementación. Tienes que hacer la matriz correcta antes de implementar en el mapa en jsx