JavaScript - Découpage en tranches d'un tableau : en fonction d'un filtre pour une plage différente

Question

J'ai un tableau d'objets comme suit :

Array :

[
  {
    "isChecked": false,
    "title": "00:00"
  },
  {
    "isChecked": false,
    "title": "00:30"
  },
  {
    "isChecked": false,
    "title": "01:00"
  },
  {
    "isChecked": false,
    "title": "01:30"
  },
  {
    "isChecked": false,
    "title": "02:00"
  },
  {
    "isChecked": false,
    "title": "02:30"
  },
  {
    "isChecked": false,
    "title": "03:00"
  },
  {
    "isChecked": false,
    "title": "03:30"
  },
  {
    "isChecked": false,
    "title": "04:00"
  },
  {
    "isChecked": false,
    "title": "04:30"
  },
  {
    "isChecked": false,
    "title": "05:00"
  },
  {
    "isChecked": false,
    "title": "05:30"
  },
  {
    "isChecked": false,
    "title": "06:00"
  },
  {
    "isChecked": false,
    "title": "06:30"
  },
  {
    "isChecked": false,
    "title": "07:00"
  },
  {
    "isChecked": false,
    "title": "07:30"
  },
  {
    "isChecked": false,
    "title": "08:00"
  },
  {
    "isChecked": false,
    "title": "08:30"
  },
  {
    "isChecked": false,
    "title": "09:00"
  },
  {
    "isChecked": false,
    "title": "09:30"
  },
  {
    "isChecked": false,
    "title": "10:00"
  },
  {
    "isChecked": false,
    "title": "10:30"
  },
  {
    "isChecked": false,
    "title": "11:00"
  },
  {
    "isChecked": false,
    "title": "11:30"
  }
]

UI : Il s'affiche comme ceci :

Action de l'utilisateur : Lorsque l'utilisateur sélectionne une tranche horaire, comme ceci :

L'Array aura ensuite des temps de contrôle.

[
  {
    "isChecked": true,
    "title": "00:00"
  },
  {
    "isChecked": true,
    "title": "00:30"
  },
  {
    "isChecked": true,
    "title": "01:00"
  },
  {
    "isChecked": true,
    "title": "01:30"
  },
  {
    "isChecked": true,
    "title": "02:00"
  },
  {
    "isChecked": false,
    "title": "02:30"
  },
  {
    "isChecked": false,
    "title": "03:00"
  },
  {
    "isChecked": false,
    "title": "03:30"
  },
  {
    "isChecked": false,
    "title": "04:00"
  },
  {
    "isChecked": false,
    "title": "04:30"
  },
  {
    "isChecked": false,
    "title": "05:00"
  },
  {
    "isChecked": false,
    "title": "05:30"
  },
  {
    "isChecked": false,
    "title": "06:00"
  },
  {
    "isChecked": false,
    "title": "06:30"
  },
  {
    "isChecked": true,
    "title": "07:00"
  },
  {
    "isChecked": true,
    "title": "07:30"
  },
  {
    "isChecked": true,
    "title": "08:00"
  },
  {
    "isChecked": true,
    "title": "08:30"
  },
  {
    "isChecked": true,
    "title": "09:00"
  },
  {
    "isChecked": false,
    "title": "09:30"
  },
  {
    "isChecked": true,
    "title": "10:00"
  },
  {
    "isChecked": true,
    "title": "10:30"
  },
  {
    "isChecked": true,
    "title": "11:00"
  },
  {
    "isChecked": false,
    "title": "11:30"
  }
]

Ce que je veux : Une liste de toutes les sessions de temps (du début à la fin), basée sur les créneaux horaires sélectionnés :

sortie :

[
  {
    "StartTime": "00:00",
    "EndTime": "02:00"
  },
{
    "StartTime": "07:00",
    "EndTime": "09:00"
  },
{
    "StartTime": "10:00",
    "EndTime": "11:00"
  },
]

J'ai essayé un peu, mais je n'ai pas obtenu le résultat souhaité.

voici le lien de mon code https://stackblitz.com/edit/ngoninit-wvnjfk

Votre aide sera très appréciée !

Answer 1

Vous pouvez vérifier l'emplacement et le prédécesseur et ajouter un nouvel objet ou mettre à jour le dernier objet.

var data = [{ isChecked: true, title: "00:00" }, { isChecked: true, title: "00:30" }, { isChecked: true, title: "01:00" }, { isChecked: true, title: "01:30" }, { isChecked: true, title: "02:00" }, { isChecked: false, title: "02:30" }, { isChecked: false, title: "03:00" }, { isChecked: false, title: "03:30" }, { isChecked: false, title: "04:00" }, { isChecked: false, title: "04:30" }, { isChecked: false, title: "05:00" }, { isChecked: false, title: "05:30" }, { isChecked: false, title: "06:00" }, { isChecked: false, title: "06:30" }, { isChecked: true, title: "07:00" }, { isChecked: true, title: "07:30" }, { isChecked: true, title: "08:00" }, { isChecked: true, title: "08:30" }, { isChecked: true, title: "09:00" }, { isChecked: false, title: "09:30" }, { isChecked: true, title: "10:00" }, { isChecked: true, title: "10:30" }, { isChecked: true, title: "11:00" }, { isChecked: false, title: "11:30" }],
    result = data.reduce((r, { isChecked, title }, i, a) => {
        if (!isChecked) return r;

        if (!i || !a[i - 1].isChecked) r.push({ StartTime: title, EndTime: title });
        else r[r.length - 1].EndTime = title;

        return r;
    }, []);         

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Solution utilisant js reduce. Chunk array then take first and last time.

const data=[{"isChecked":!0,"title":"00:00"},{"isChecked":!0,"title":"00:30"},{"isChecked":!0,"title":"01:00"},{"isChecked":!0,"title":"01:30"},{"isChecked":!0,"title":"02:00"},{"isChecked":!1,"title":"02:30"},{"isChecked":!1,"title":"03:00"},{"isChecked":!1,"title":"03:30"},{"isChecked":!1,"title":"04:00"},{"isChecked":!1,"title":"04:30"},{"isChecked":!1,"title":"05:00"},{"isChecked":!1,"title":"05:30"},{"isChecked":!1,"title":"06:00"},{"isChecked":!1,"title":"06:30"},{"isChecked":!0,"title":"07:00"},{"isChecked":!0,"title":"07:30"},{"isChecked":!0,"title":"08:00"},{"isChecked":!0,"title":"08:30"},{"isChecked":!0,"title":"09:00"},{"isChecked":!1,"title":"09:30"},{"isChecked":!0,"title":"10:00"},{"isChecked":!0,"title":"10:30"},{"isChecked":!0,"title":"11:00"},{"isChecked":!1,"title":"11:30"}];

const result = data.reduce(({ curr, times }, n) => {
    if (curr != n.isChecked && n.isChecked) times.push([]);
    if (n.isChecked) times[times.length-1].push(n.title);
    return { curr: n.isChecked, times };
}, { curr: false, times: [] }).times.map(range => ({ StartTime: range[0], EndTime: range[range.length-1] }));

console.log(result);

Answer 3

Vous pouvez réduire le jeu de données des tranches horaires et renvoyer des blocs horaires basés sur les tranches horaires actuelles et précédentes.

1. Vérifiez simplement isChecked et ajouter un nouveau bloc, si l'emplacement précédent n'a pas été vérifié.

2. Si le bloc actuel n'est pas vérifié, mais que le précédent l'était, terminez le bloc horaire.

   const expected = getExpected(), actual = calculateTimeBlocks(getInput());

   console.log('Equal?:', JSON.stringify(actual) === JSON.stringify(expected)); console.log(actual);

   function calculateTimeBlocks(timeSlots) {
   return timeSlots.reduce((blocks, curr, index, arr) => { let prev = index > 0 ? arr[index - 1] : null; if (curr.isChecked) { if (!prev || !prev.isChecked) { blocks.push({ "StartTime" : curr.title }); } } else { if (prev && prev.isChecked) { Object.assign(blocks[blocks.length - 1], { ["EndTime"] : prev.title }); } } return blocks; }, []); }

   function getInput() { return [ { "isChecked": true, "title": "00:00" }, { "isChecked": true, "title": "00:30" }, { "isChecked": true, "title": "01:00" }, { "isChecked": true, "title": "01:30" }, { "isChecked": true, "title": "02:00" }, { "isChecked": false, "title": "02:30" }, { "isChecked": false, "title": "03:00" }, { "isChecked": false, "title": "03:30" }, { "isChecked": false, "title": "04:00" }, { "isChecked": false, "title": "04:30" }, { "isChecked": false, "title": "05:00" }, { "isChecked": false, "title": "05:30" }, { "isChecked": false, "title": "06:00" }, { "isChecked": false, "title": "06:30" }, { "isChecked": true, "title": "07:00" }, { "isChecked": true, "title": "07:30" }, { "isChecked": true, "title": "08:00" }, { "isChecked": true, "title": "08:30" }, { "isChecked": true, "title": "09:00" }, { "isChecked": false, "title": "09:30" }, { "isChecked": true, "title": "10:00" }, { "isChecked": true, "title": "10:30" }, { "isChecked": true, "title": "11:00" }, { "isChecked": false, "title": "11:30" } ]; }

   function getExpected() { return [ { "StartTime": "00:00", "EndTime": "02:00" }, { "StartTime": "07:00", "EndTime": "09:00" }, { "StartTime": "10:00", "EndTime": "11:00" }, ]; }

   .as-console-wrapper { top: 0; max-height: 100% !important; }