J'ai la structure de données suivante que je reçois d'une API :

response = [{grade: 'A', frequency: 54, percentage: 24},
      {grade: 'B', frequency: 50, percentage: 10},
      {grade: 'C', frequency: 0, percentage: 0},
      {grade: 'D', frequency: 50, percentage: 20},
      ...
    ];

Désormais, certaines bibliothèques javascript d'interface utilisateur nécessitent que ces données soient formatées et présentées comme suit :

label: ['A', 'B', 'C', 'D'];
data: [[54,50,0,50],[24,10,0,20]];
series: ['frequency', 'percentage'];

Quel serait le moyen le plus efficace de convertir l'objet response en les éléments ci-dessus ?

let label = response.map(data => data.grade);
let freqencyData = response.map(data => data.freqency);
let percentageData = response.map(data => data.percentage);
let data = [freqencyData, percentageData];

Est-ce que quelque chose comme ça serait assez efficace ? Veuillez noter qu'il s'agit d'un exemple et que les données de réponse dans mon cas sont trop volumineuses et que le fait de faire la carte trois fois semble être excessif. Merci

1
dawit 15 mars 2019 à 03:53

2 réponses

Meilleure réponse

Vous pouvez utiliser la fonction reduce pour créer la sortie presque souhaitée en une seule boucle.

  1. Séparez l'attribut label du reste des attributs.
  2. Regroupez les valeurs par le nom de propriété spécifique (données, étiquette et série).
  3. L'objet Set vous permet de conserver des chaînes uniques pour le series.
  4. Object.from convertit l'objet Set en Array.
  5. Object.values extraits de ceci : {frequency: [1,2,3], percentage: [1,2,3]} à ceci : [[1,2,3], [1,2,3]]
let response = [{grade: 'A', frequency: 54, percentage: 24},{grade: 'B', frequency: 50, percentage: 10},{grade: 'C', frequency: 0, percentage: 0},{grade: 'D', frequency: 50, percentage: 20}];
let result = response.reduce((a, {grade: label, ...rest}) => {
  Object.keys(rest).forEach(k => {
    (a.series || (a.series = new Set())).add(k);
    a.data = a.data || {};
    (a.data[k] || (a.data[k] = [])).push(rest[k]);
  });  
  (a.label || (a.label = [])).push(label);
  
  return a;
}, Object.create(null));

result.series = Array.from(result.series);
result.data = Object.values(result.data);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
0
Ele 15 mars 2019 à 01:13

Vous pouvez simplement faire une boucle à l'ancienne :

let label = [];
let freqencyData = [];
let percentageData = [];

response.forEach(function(element) {
  label.push(data.grade);
  frequencyData.push(data.frequency);
  percentageData.push(data.percentage);
});

let data = [freqencyData, percentageData];
0
Robin Chow 15 mars 2019 à 01:25