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.