1

Hola estoy intentando eliminar los valores repetidos en un array de objetos. Tengo el siguiente json:

[
  {
    id: 0,
    day: "Lunes",
    openingHours: "6:00 a.m",
    closingHours: "12:00 p.m"
  },
  {
    id: 1,
    day: "Martes",
    openingHours: "6:00 a.m",
    closingHours: "12:00 p.m"
  },
  {
    id: 2,
    day: "Miércoles",
    openingHours: "6:00 a.m",
    closingHours: "12:00 p.m"
  },
  {
    id: 3,
    day: "Jueves",
    openingHours: "6:00 a.m",
    closingHours: "12:00 p.m"
  },
  {
    id: 4,
    day: "Viernes",
    openingHours: "6:00 a.m",
    closingHours: "12:00 p.m"
  },
  {
    id: 5,
    day: "Sábado",
    openingHours: "6:00 a.m",
    closingHours: "12:00 p.m"
  },
  {
    id: 6,
    day: "Domingo",
    openingHours: "6:00 a.m",
    closingHours: "12:00 p.m"
  }
];

Como pueden ver, los valores de las propiedades openingHours y closingHours están repetidos. Agrego ese json a mi componente <App />, a continuación el componente:

import React, { useState } from 'react';
import './App.css';
import days from './days.json';

function App() {

  const [schedule, setSchedule] = useState(days),

  updateDays = () => {
    //update days
  };

  return (
    <div className="container">
      {
        schedule.map(x => (
          <>
          <div style={{marginBottom: 10, borderBottom: '.5px solid black', paddingBottom: 5}}>
          <b>{x.day}{x.firstDay}{x.firstDay ? ' - ' : null}{x.lastDay}: </b><span>{x.openingHours} - {x.closingHours}</span><br />
          </div>
          </>
        ))
      }
      <button id="button" onClick={updateDays} style={{marginTop: 20}}>Actualizar horario</button>
    </div>
  );
}

export default App;

Hago un mapeo al estado schedule y dependiendo de los elementos renderizo el dia del item, su fecha de apertura y de cierre (openingHours, closingHours). Ahora en el json no existe las propiedad firstDay y lastDay , debido a que estas se deben crear siempre y cuando, hayan días con la misma hora de entrada y de salida.

CASO 1: En el json actual, la salida debe ser: Lunes - Domingo: 6:00 a.m - 12:00 p.m, porque desde Lunes hasta el Domingo se repiten ambas horas.

CASO 2: Ahora si se modifican las fechas en el json, Ejm: si el día Lunes hasta el Miércoles tengan las mismas horas y estás no sean iguales a los demás días, la salida debe ser:

Lunes - Miécoles: 7:00 a.m - 11:00 p.m (estás fechas pueden ser cualquier otra)

Jueves - Domingo: 6:00 a.m - 12:00 p.m

CASO 3: Ahora si todas las fechas entre si son diferentes, debe mostrar todos los días con sus respectivas fechas, es decir, si en el json se modifican todas las fechas y no son equivalentes entre sí.

Entonces al hacer click en el botón, siempre debe agrupar los días en los que siempre sean iguales tanto su openingHours como closingHours, un ejm más claro lo pueden ver como funcionan los horarios de las páginas de Facebook, te agrupa los días en los que sean iguales ambas horas.

Muchas gracias por su atención, ultimamente estuve trabajando con arrays y me está costando un poco.

2 respuestas 2

1

Una posible solución es usando el método reduce

Como quieres desplegar usando el botón, creo otra constante para mostrar los horarios agrupados:

const [scheduleToShow, setScheduleToShow] = useState([])

y usando reduce obtengo un nuevo array con los horarios

 useEffect(() => {      

    setScheduleToShow(schedule.reduce((groups,groupDay) => {      
      const openingtime = groupDay.openingHours + " - " + groupDay.closingHours  
      const openingTimeIncludedInAGroup = groups.find(singleDay => 
        singleDay.hours === openingtime)
      
      const id = openingTimeIncludedInAGroup && openingTimeIncludedInAGroup.id

      if(id){
        return groups.map( item => item.id === id
          ?  {...item, days: item.days.concat(groupDay.day)}
          : item)
      }

      return groups.concat({
        id: randomId(),
        hours: openingtime,
        days: [groupDay.day]
      })

    },[]))


  }, [])

Lo que hace reduce es devolver un array de objetos llamado groups, cada objeto tiene la forma

{ id: *id* // 13153..,
 hours: *hours* // 6.00 - 11.00,
days : *day* // [day1, day2,..] }

si groups contiene al horario del elemento (openingTime) agrega un elemento a los dias del grupo (group.days) y en caso contrario crea un elemento y lo agrega al grupo.

Al hacer click al boton se muestra de manera condicional en el JSX:

{showGroups
        ?
          scheduleToShow.map(group => (          
            <div
              key ={group.id} 
              style={{marginBottom: 10, borderBottom: '.5px solid black', paddingBottom: 5}}>
            <b>{group.days.length === 1
                  ?  group.days 
                  : group.days[0]+ " - "+ group.days[group.days.length - 1]}: </b><span>{group.hours}</span><br />
            </div>
          
          ))
        : 
          schedule.map...
          
      }
1
  • Genial y brillante respuesta david, he tardado en responder porque estuve viendo como funciona reduce, aunque testeando tu código, parece que al estar todas las horas iguales sigue manteniendo y no muestra: Lunes - Domingo: 6:00 a.m - 12:00 p.m . Sino puedo resolver, volveré a comentar. Gracias !
    – Husdady
    Commented el 9 may. 2021 a las 22:28
0

Con la ayuda de @davidbug se pudo resolver este problema, si alguien desea implementar estos tipos de horarios, dejo mi código tal vez les ayude. Ahora en vez de separar por guiones, es decir, Lunes - Domingo, lo hace por comas, ejm: lunes, martes, ..., domingo.

Esto ayuda mucho ya que, En caso de que exista: Lunes - Domingo: 2:00 a.m - 9:00 p.m Sábado: 4:00 a.m - 8:00 p.m, el sábado 'estaría' incluido en lunes hasta domingo, por eso es mejor separarlo por comas.

import React, { useState } from 'react';
import './App.css';

const days = [
  {
    id: 0,
    day: "Lunes",
    openingHours: "4:35 a.m",
    closingHours: "15:00 p.m"
  },
  {
    id: 1,
    day: "Martes",
    openingHours: "4:35 a.m",
    closingHours: "15:00 p.m"
  },
  {
    id: 2,
    day: "Miércoles",
    openingHours: "4:35 a.m",
    closingHours: "15:00 p.m"
  },
  {
    id: 3,
    day: "Jueves",
    openingHours: "6:35 a.m",
    closingHours: "15:00 p.m"
  },
  {
    id: 4,
    day: "Viernes",
    openingHours: "6:35 a.m",
    closingHours: "15:00 p.m"
  },
  {
    id: 5,
    day: "Sábado",
    openingHours: "5:35 a.m",
    closingHours: "15:00 p.m"
  },
  {
    id: 6,
    day: "Domingo",
    openingHours: "6:35 a.m",
    closingHours: "15:00 p.m"
  }
];

function App() {

  const [scheduleToShow, setScheduleToShow] = useState([]),

    updateDays = () => {

      const newSchedule = days.reduce((groups, weekdays, index) => {

        const openingTime = weekdays.openingHours + " - " + weekdays.closingHours;

        const openingTimeIncludedInAGroup = groups.find(singleDay => 
          singleDay.hours === openingTime)
        
        const id = openingTimeIncludedInAGroup && openingTimeIncludedInAGroup.id;
  
        if (openingTimeIncludedInAGroup) {
          return groups.map(item => item.id === id
            ?  {...item, days: item.days.concat(weekdays.day)}
            : item)
        }

        return groups.concat({
          id: index,
          hours: openingTime,
          days: [weekdays.day]
        });

      }, []);
      
      setScheduleToShow(newSchedule);

    };

  return (
    <div className="container">
      {scheduleToShow.length > 0
        ?
        scheduleToShow.map(weekdays => (
          <div
            key={weekdays.id}
            style={{ marginBottom: 10, borderBottom: '.5px solid black', paddingBottom: 5 }}>
              <b>
              {
                weekdays.days.length === 7
                ? `${weekdays.days[0]} - ${weekdays.days[weekdays.days.length - 1]}`
                : weekdays.days.length === 1
                  ? weekdays.days[0]
                  : weekdays.days.join(', ')
              }
              </b>
              <span>{weekdays.hours}</span><br />
          </div>

        ))
        :
        days.map(weekdays => (
          <div
          key={weekdays.id}
          style={{ marginBottom: 10, borderBottom: '.5px solid black', paddingBottom: 5 }}>
            <b>{weekdays.day}: </b><span>{weekdays.openingHours} - {weekdays.closingHours}</span><br />
          </div>
        ))
      }
      <button id="button" onClick={updateDays} style={{ marginTop: 20 }}>Actualizar horario</button>
    </div>
  );
}

export default App;

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.