0

Me gustaría saber como mapear un array, donde el primer resultado del array tiene que ser el que cumpla la condición, pero se siga mapendo el resto. Por ejemplo, que el primer resultado del array sea el Organizador y el resto sean los Participantes. La condición por la que filtrar:

{assistant.id === ownerId ? "Organizador" : "Participante"}

Este es mi componente de react.

interface Props {
  assistants: Assistant[];
  ownerId: Id;
}

export const EventAssistants = ({ assistants, ownerId }: Props) => {
  return (
    <section>
      <StyledSectionTitle>Asistentes ({assistants.length})</StyledSectionTitle>
      <StyledAssitantsList>
        {assistants.map((assistant) => (
          <li key={assistant.id}>
            <StyledAssistant>
              <StyledFlex
                flexDirection="column"
                justifyContent="center"
                alignItems="center"
              >
                <StyledUserImage background={assistant.avatar} size="70px" />
                <p className="fullname">
                  {assistant.name} {`${assistant.lastName.substring(0, 1)}.`}
                </p>
                <p className="usertype">
                  {assistant.id === ownerId ? "Organizador" : "Participante"}
                </p>
              </StyledFlex>
            </StyledAssistant>
          </li>
        ))}
      </StyledAssitantsList>
    </section>
  );
};

Cualquier orientación o ayuda sería genial. Muchas gracias!

4 respuestas 4

1

Eso lo puedes lograr con un reduce

const assistants = [
  {
     id: 1,
     name: "Juan"
  },
  {
     id: 2,
     name: "Maria"
  },
  {
     id: 3,
     name: "Pedro"
  },
];

const ownerId = 2;

const primeroElOrganizador = assistants.reduce((a,e) => e.id === ownerId ? [e, ...a] : [...a, e], [])
  
console.log(primeroElOrganizador)

Se van agregando participantes al array, pero si el participante es el organizador se agrega al inicio del array, hasta que se terminan de procesar todos.

1
  • Muchas gracias por tu respuesta @pipe. Me ha parecido brillante tu solución. La utilizaré! Gracias!
    – jaumeserr
    Commented el 13 may. 2022 a las 22:53
1

Si tiene que ser si o si con map() desestima esta respuesta, sino esto puede servirte:

const obj = [{assistant: true},{nombre: "pedro", edad: 20},{nombre: "juan", edad: 25},{nombre: "jose", edad: 23}]

 const verifica = (array) => {
  let final = []
  if(array[0].assistant === true){
   for (let i = 1; i < array.length; i++) {
    final = [...final,array[i]]
   }
  }
  return final
 }

 console.log(verifica(obj));

Es una funcion a la cual le paso el array y verifico si la posicion 0 tiene resultado true, si es asi hago un ciclo for que empiece a contar desde 1, ya que la posicion 0 es la verificada y meto todo en un nuevo arreglo con el spread operator con lo cual tienes tu arreglo original intacto (si quieres puedes sobreescribir el original.

1
  • Gracias Hernán! En principio debería ser un map. Es la solución que intente hacer. Además no puedo poner el primer objeto que sea assistants true… el listado me viene de Backend. Gracias d todos modos!
    – jaumeserr
    Commented el 13 may. 2022 a las 22:56
1

Hola jaumeserr para mover cierto elemento de índice que cumple una condición, sería de la siguiente forma:

basado en este post https://stackoverflow.com/questions/5306680/move-an-array-element-from-one-array-position-to-another

// basado en este post https://stackoverflow.com/questions/5306680/move-an-array-element-from-one-array-position-to-another

const data = [{
    id: 1,
    age: 24,
    gender: "male",
    category: "Participante"
},
{
    id: 2,
    age: 27,
    gender: "female",
    category: "Participante"
},
{
    id: 3,
    age: 30,
    gender: "male",
    category: "Organizador"
},
{
    id: 4,
    age: 10,
    gender: "female",
    category: "Participante"
},
]

//encontramos el indice del Organizador
const buscador = "Organizador"
const indiceQueCumpleCondicion = data.findIndex(v => v.category == buscador)

// Verificamos (opcional)
console.log(indiceQueCumpleCondicion);

//funcion que mueve a la posición que queremos.
//recibe: arr = array, old_index: antiguo indice/indice actual, new_index: nuevo indice
const cambiarPosicionEnArray = (arr, old_index, new_index) => {
    if (new_index >= arr.length) {
        var k = new_index - arr.length + 1;
        while (k--) {
            arr.push(undefined);
        }
    }
    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
    return arr; // for testing
};

//llamamos la función
const newData = cambiarPosicionEnArray(data, indiceQueCumpleCondicion, 0)

//Ahora tienes disponible el array como lo quieres y puedes mapearlo
console.log(newData)

/*Claro que basado en este comentario: "es como poner el resultado filtrado al inicio del array y después seguir iterando con el resto que no cumple la condición de organizador… espero haberme explicado bien y muchas gracias de nuevo"*/

//Una vez organizado el array como quiero lo filtro e itero sobre todos excepto el Organizador

const filter = newData.filter(v => v.category != buscador)

//Ahora tienes disponible todos excepto el Organizador
console.log(filter)

si ves ahí primero busca la posición y luego llamas a la función y les pasas los argumentos que pide y ya. Espero que te sirva. Saludos

3
  • Muchas gracias @Weizman por tu ayuda! Me es de mucha utilidad tu código!
    – jaumeserr
    Commented el 13 may. 2022 a las 22:50
  • Si te parece que la respuesta abarcó varios de tus requerimientos o sí estimas que es de gran utilidad, marcarla como resuelta vale.
    – Weizman
    Commented el 14 may. 2022 a las 0:32
  • 1
    También agradecería a los que ven éste post que actualmente estoy en búsqueda de empleo, soy desarrollador Full Stack React & Node Js con 1+ de experiencia.
    – Weizman
    Commented el 14 may. 2022 a las 0:34
0

Para mapear un arreglo y filtrar por condiciones te recomiendo usar filter de javascript en donde mapeas un arreglo y filter te retorna todos los elementos que cumplan la condición

const editarPlanCuidado = (id) => {

//Obtener el plan de cuidado a editar
const planEncontrado = planCuidados.filter(x => x.Id == id)
}

En el ejemplo de arriba busca todos los elementos de planCuidados que cumplan la condicion y los guarda en planEncontrado Para tu caso seria algo como:

//Obtener todos los organizadores
const Organizadores = assistant.filter(a=>{a.id == ownerId})

Recuerda que filter lo puedes complementar con find, map, reduce , además también se puede usar mas de una condición con filter

Te dejo documentación acerca de filter en el siguiente enlace: Documentacion filter

1
  • David081 gracias por tu pronta respuesta. En principio mi pregunta no es como se hace un filter, es como poner el resultado filtrado al inicio del array y después seguir iterando con el resto que no cumple la condición de organizador… espero haberme explicado bien y muchas gracias de nuevo.
    – jaumeserr
    Commented el 13 may. 2022 a las 12:35

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.