0
votes

Restructurer un tableau d'objets à un niveau plus profond

J'essaye de créer une table en utilisant le HTML de base (JSX). Chaque rangée doit avoir une date unique suivie du nombre de pommes, fraises, bananes et oranges vendues ce jour-là.

Les données que je reçois de mon API rendent difficile la création de la table, je dois donc la restructurer.

const newData = {
  "2020-11-14": { Bananas: 0, Apples: 9, Strawberries: 2, Oranges: 0 },
  "2020-11-13": { Bananas: 2, Apples: 1, Strawberries: 3, Oranges: 4 },
  "2020-11-12": { Bananas: 5, Apples: 2, Strawberries: 2, Oranges: 0 },
  "2020-11-11": { Bananas: 0, Apples: 8, Strawberries: 0, Oranges: 3 },
};

Pour le faire ressembler à ceci:

const data = [
  {
    id: 1,
    date_sold: "2020-11-14",
    fruit: "Apples",
    amount: 9,
  },
  {
    id: 2,
    date_sold: "2020-11-14",
    fruit: "Strawberries",
    amount: 2,
  },
  {
    id: 3,
    date_sold: "2020-11-13",
    fruit: "Apples",
    amount: 1,
  },
  {
    id: 4,
    date_sold: "2020-11-13",
    fruit: "Oranges",
    amount: 4,
  },
  {
    id: 5,
    date_sold: "2020-11-13",
    fruit: "Bananas",
    amount: 2,
  },
  {
    id: 6,
    date_sold: "2020-11-13",
    fruit: "Strawberries",
    amount: 3,
  },
  {
    id: 7,
    date_sold: "2020-11-12",
    fruit: "Apples",
    amount: 2,
  },
  {
    id: 8,
    date_sold: "2020-11-12",
    fruit: "Bananas",
    amount: 5,
  },
  {
    id: 9,
    date_sold: "2020-11-12",
    fruit: "Strawberries",
    amount: 2,
  },
  {
    id: 10,
    date_sold: "2020-11-11",
    fruit: "Apples",
    amount: 8,
  },
  {
    id: 11,
    date_sold: "2020-11-11",
    fruit: "Oranges",
    amount: 3,
  },
];

javascript algorithm data-structures

0 commentaires

3 Réponses :

2
votes

Cela peut être fait en utilisant Array.prototype.reduce .

const data = [
  {
    id: 1,
    date_sold: "2020-11-14",
    fruit: "Apples",
    amount: 9,
  },
  {
    id: 2,
    date_sold: "2020-11-14",
    fruit: "Strawberries",
    amount: 2,
  },
  {
    id: 3,
    date_sold: "2020-11-13",
    fruit: "Apples",
    amount: 1,
  },
  {
    id: 4,
    date_sold: "2020-11-13",
    fruit: "Oranges",
    amount: 4,
  },
  {
    id: 5,
    date_sold: "2020-11-13",
    fruit: "Bananas",
    amount: 2,
  },
  {
    id: 6,
    date_sold: "2020-11-13",
    fruit: "Strawberries",
    amount: 3,
  },
  {
    id: 7,
    date_sold: "2020-11-12",
    fruit: "Apples",
    amount: 2,
  },
  {
    id: 8,
    date_sold: "2020-11-12",
    fruit: "Bananas",
    amount: 5,
  },
  {
    id: 9,
    date_sold: "2020-11-12",
    fruit: "Strawberries",
    amount: 2,
  },
  {
    id: 10,
    date_sold: "2020-11-11",
    fruit: "Apples",
    amount: 8,
  },
  {
    id: 11,
    date_sold: "2020-11-11",
    fruit: "Oranges",
    amount: 3,
  },
];

const output = data.reduce((acc, cur) => {
  acc[cur.date_sold] ? acc[cur.date_sold][cur.fruit] = cur.amount : acc[cur.date_sold] = {
    [cur.fruit]: cur.amount
  };
  return acc;
}, {});
console.log(output);

0 commentaires

0
votes

Vous devez créer les newData par parties. Commencez par collecter toutes les dates et tous les fruits, comme:

const newData = Object.fromValues(
  dates.map(function (date) {
    const fruitsCount = Object.fromValues(
      fruits.map(function (fruit) {
        return [fruit, 0];
      })
    });
    for (const item of data) {
      if (item.date === date) {
        fruitsCount[item.fruit] += item.amout;
      }
    }
    return [data, fruitsCount];
);

Ensuite, vous pouvez créer votre objet newDate, comme:

const dates = [];
const fruits = [];

for (const item of data) {
  if (!dates.includes(data.date_sold))
    dates.push(data.date_sold);
  if (!fruits.includes(data.fruit))
    fruits.push(data.push);
}

0 commentaires

0
votes

Je pense que la solution suivante est plus lisible.

const result = {};

data.forEach(el => {
    const keys = Object.keys(result);
    if (keys.indexOf(el.date_sold) > -1) {
        const amount = result[el.date_sold][el.fruit];
        result[el.date_sold][el.fruit] = (amount || 0) + el.amount;
    } else {
        result[el.date_sold] = {
            [el.fruit]: el.amount
        };
    }
});

0 commentaires