0

Obtengo el resultado de la captura usando este mapeado. Los identrificadores son idénticos en dos casos distintos:

  const duplicados = [
     {uid: 'd981560bc1604e6c995d2263391aeefc', name: 'How is the Billing?', answer: 'Event Triger' },
     {uid: 'd981560bc1604e6c995d2263391aeefc', name: 'How is the Billing?', answer: 'Per Transaction' },
     {uid: '6a2701c7ed1a4f9c83748095b2815ce7', name: 'Subscription:Which is frequency of the billing?', answer: 'third answer'},
     {uid: '6a2701c7ed1a4f9c83748095b2815ce7', name: 'Subscription:Which is frequency of the billing?', answer: 'fourth answer' },
     {uid: '6a2701c7ed1a4f9c83748095b2815ce7', name: 'Subscription:Which is frequency of the billing?', answer: 'five answer' }
     ]

                 {duplicados &&
                      duplicados.map((questmapn: any, index: any) => (
                        <>
                          {questmapn.name}
                          <select className="form-control">
                              <>
                                <option>{questmapn.answer}</option>
                              </>
                          </select>
                        </>
                  ))}

mapeado

Necesito unificar los select combo mostrando solamente un enunciado y un select con los options dentro, más o menos como en la captura de la derecha, usando los uid idénticos de cada registro.

mapeado2 captura de la derecha

Existe alguna manera de hacerlo desde el map? hay que usar una función específica?

1 respuesta 1

0

He encontrado una buena manera de llevar a cabo la separación por identificador usando reduce en una función aparte.

const duplicados = [
 {uid: 'd981560bc1604e6c995d2263391aeefc', name: 'How is the Billing?', answer: 'Event Triger' },
 {uid: 'd981560bc1604e6c995d2263391aeefc', name: 'How is the Billing?', answer: 'Per Transaction' },
 {uid: '6a2701c7ed1a4f9c83748095b2815ce7', name: 'Subscription:Which is frequency of the billing?', answer: 'third answer'},
 {uid: '6a2701c7ed1a4f9c83748095b2815ce7', name: 'Subscription:Which is frequency of the billing?', answer: 'fourth answer' },
 {uid: '6a2701c7ed1a4f9c83748095b2815ce7', name: 'Subscription:Which is frequency of the billing?', answer: 'five answer' }
 ]


  const splittedData = duplicados.reduce((acc: any, curr: any) => {
   const { uid, name, answer } = curr;
   if (!acc[uid]) {
    acc[uid] = { name, items: [] };
   }
   acc[uid].items.push(answer);
   return acc;
  }, {});

  //6a2701c7ed1a4f9c83748095b2815ce7: {name: 'Subscription:Which is frequency of the billing?', items: Array(3)}
  //d981560bc1604e6c995d2263391aeefc: {name: 'How is the Billing?', items: Array(2)}

Para posteriormente renderizarlo usando Object.keys en el map de la siguiente manera:

      {Object.keys(splittedData).map((key, index) => (
          <>
           {`${splittedData[key].name}`}
              <select className="form-control mb-4">
              {splittedData[key].items.map(
              (item: any, index: any) => (
                 <option>{` ${item}`}</option>
              )
           )}
              </select>
           </>
        ))}

El resultado queda tal como necesitaba:

resultado optimo

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.