3
votes

Javascript: diviser le tableau d'objets en tableaux séparés avec des noms dynamiques en fonction de la valeur de la propriété

J'ai un tableau contenant des objets. Maintenant, je veux découper le tableau en nouveaux tableaux contenant uniquement les objets correspondant à une certaine valeur de propriété.

Idéalement, les nouveaux noms de tableau devraient être créés dynamiquement.

Le tableau d'origine ressemble à ceci: p >

timespan1 = [
  {slotStarttime:"06:00:00", slotTimespan:1},
  {slotStarttime:"09:00:00", slotTimespan:1}
]

timespan2 = [
  {slotStarttime:"12:00:00", slotTimespan:2},
  {slotStarttime:"15:00:00", slotTimespan:2}
]

timespan3 = [
  {slotStarttime:"18:00:00", slotTimespan:3}
]

Les nouveaux tableaux devraient ressembler à ceci:

specificSlotButtonArray = [
  {slotStarttime:"06:00:00", slotTimespan:1},
  {slotStarttime:"09:00:00", slotTimespan:1},
  {slotStarttime:"12:00:00", slotTimespan:2},
  {slotStarttime:"15:00:00", slotTimespan:2},
  {slotStarttime:"18:00:00", slotTimespan:3}
];

Si possible, je veux éviter la syntaxe / les fonctions javascript, qui ne sont pas pris en charge par IE et certains autres navigateurs plus anciens.

J'ai déjà essayé de travailler avec reduction () et slice () , mais je n'ai pas trouvé de solution .

javascript object arrays slice

0 commentaires

5 Réponses :

7
votes

Vous pouvez simplement obtenir le résultat souhaité en utilisant réduire , comme vous pouvez produire un objet en utilisant réduire , voici un exemple de la façon dont vous pourriez le faire.

Comme vous pouvez le voir, il vérifiera que la propriété pertinente sur l'objet n'est pas nulle, si c'est le cas, alors elle est définie sur un tableau vide, après cette vérification, il est sûr de simplement pousser les valeurs pertinentes sur le tableau, comme ça.

var array = [{
    slotStarttime: "06:00:00",
    slotTimespan: 1
  },
  {
    slotStarttime: "09:00:00",
    slotTimespan: 1
  },
  {
    slotStarttime: "12:00:00",
    slotTimespan: 2
  },
  {
    slotStarttime: "15:00:00",
    slotTimespan: 2
  },
  {
    slotStarttime: "18:00:00",
    slotTimespan: 3
  }
];

var newObject = array.reduce(function(obj, value) {
  var key = `timespan${value.slotTimespan}`;
  if (obj[key] == null) obj[key] = [];

  obj[key].push(value);
  return obj;
}, {});

console.log(newObject);

0 commentaires

3
votes

Vous pouvez réduire le tableau en prenant un objet pour les tableaux de pièces.

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

var specificSlotButtonArray = [{ slotStarttime: "06:00:00", slotTimespan: 1 }, { slotStarttime: "09:00:00", slotTimespan: 1 }, { slotStarttime: "12:00:00", slotTimespan: 2 }, { slotStarttime: "15:00:00", slotTimespan: 2 }, { slotStarttime: "18:00:00", slotTimespan: 3 }],
    timespan1 = [],
    timespan2 = [],
    timespan3 = [];
    
specificSlotButtonArray.reduce(function (r, o) {
    r[o.slotTimespan].push(o);
    return r;
}, { 1: timespan1, 2: timespan2, 3: timespan3 });

console.log(timespan1);
console.log(timespan2);
console.log(timespan3);

0 commentaires

0
votes

Vous pouvez utiliser cette fonction pour créer des tableaux séparés regroupés par slotTimespan ,

    specificSlotButtonArray = [
        {slotStarttime:"06:00:00", slotTimespan:1},
        {slotStarttime:"09:00:00", slotTimespan:1},
        {slotStarttime:"12:00:00", slotTimespan:2},
        {slotStarttime:"15:00:00", slotTimespan:2},
        {slotStarttime:"18:00:00", slotTimespan:3}
    ];
    
    function groupBy(arr, property) {
        return arr.reduce(function(memo, x) {
            if (!memo[x[property]]) { memo[x[property]] = []; }
            memo[x[property]].push(x);
            return memo;
        }, {});
    }
    
    console.log(groupBy(specificSlotButtonArray, "slotTimespan"));

0 commentaires

1
votes

La solution suivante se répète une fois sur specificSlotButtonArray en utilisant Array.reduce . Cette solution s'adaptera à n'importe quel nombre de slotTimespan.

const [
  timespan1,
  timespan2,
  timespan3
] = specificSlotButtonArray.reduce((tmp, x) => {

Si vous voulez traiter le tableau juste après le Array.reduce , vous pouvez utiliser la destructuration:

const specificSlotButtonArray = [{
    slotStarttime: '06:00:00',
    slotTimespan: 1,
  },
  {
    slotStarttime: '09:00:00',
    slotTimespan: 1,
  },
  {
    slotStarttime: '12:00:00',
    slotTimespan: 2,
  },
  {
    slotStarttime: '15:00:00',
    slotTimespan: 2,
  },
  {
    slotStarttime: '18:00:00',
    slotTimespan: 3,
  },
];

// Loop through the array
const splitted = specificSlotButtonArray.reduce((tmp, x) => {
  // Look if we got already an array having the slotTimespan of the current
  // item to treat
  const match = tmp.find(y => y.some(z => z.slotTimespan === x.slotTimespan));

  // If we have such array, push the data into it
  if (match) {
    match.push(x);
  } else {
    // If we don't create a new array
    tmp.push([x]);
  }

  return tmp;
}, []);

console.log(splitted);

0 commentaires

3
votes

Utilisez un groupe générique par réducteur de clé. Je vais le prendre sur un ma réponse précédente . C'est un moyen élégant et simple de générer une fonction qui regroupe vos données par une clé particulière qui vient en argument.

const groupBy = key => (result,current) => {
  const item = Object.assign({},current);
  if (typeof result[current[key]] == 'undefined'){
    result[current[key]] = [item];
  }else{
    result[current[key]].push(item);
  }
  return result;
};

const specificSlotButtonArray = [
  {slotStarttime:"06:00:00", slotTimespan:1},
  {slotStarttime:"09:00:00", slotTimespan:1},
  {slotStarttime:"12:00:00", slotTimespan:2},
  {slotStarttime:"15:00:00", slotTimespan:2},
  {slotStarttime:"18:00:00", slotTimespan:3}
];

const timespan = specificSlotButtonArray.reduce(groupBy('slotTimespan'),{});
console.log(timespan);

0 commentaires