Блог

Главная - Вопросы по программированию - Форматирование массива / объектных данных для диаграмм Google

Форматирование массива / объектных данных для диаграмм Google

#javascript #arrays #javascript-objects

#javascript #массивы #javascript-объекты

Вопрос:

на сервере я загружаю файл JSON и конвертирую его в массив, затем возвращаю его обратно во внешний интерфейс. Эти данные имеют много слоев, необходимо использовать разные их части для диаграмм Google.

Итак, давайте назовем мою первую диаграмму chartOne. Я могу получить данные, которые мне нужны для этой диаграммы, используя точечную нотацию

 console.log(this.chartData.chartOne)

Это выведет что-то вроде следующего, по сути, это массив, содержащий объекты.

 (3) [{…}, {…}, {…}]
    0:
        Category: "cat1"
        Count: 11
    1: 
        Category: "cat2"
        Count: 14
    2: 
        Category: "cat3"
        Count: 21

То, что я пытаюсь сделать, это подготовить эти данные для гистограммы. Google ожидает, что мои данные будут предоставлены в следующем формате

 const chartData = [
    ["cat1", "cat2", "cat3"],
    [11, 14, 21]
]

Таким образом, первая строка должна содержать значения для категории, а строка под этим содержит их количество.

Мой вопрос в том, как мне подготовить свои данные в этом формате? Я пытаюсь сделать несколько вещей, но они кажутся чрезмерными, и я немного застрял. Вот где я сейчас нахожусь

 Object.keys(this.chartData.chartOne).forEach(key => {
    const vmKeys = this.chartData.chartOne[key]
    Object.keys(vmKeys).forEach(key => {
        console.log(vmKeys   vmKeys[key])
    })
})

Есть ли лучший способ сделать это, используя что-то вроде map или какую-либо другую функцию ES6?

Спасибо

Ответ №1:

 const chartData = {
  chartOne: [{
      Category: "cat1",
      Count: 11
    },
    {
      Category: "cat2",
      Count: 14
    },
    {
      Category: "cat3",
      Count: 21
    }
  ]
}

const newChartData = chartData.chartOne.reduce((acc, item) => {
  acc[0].push(item.Category);
  acc[1].push(item.Count);
  return acc;
}, [[],[]]);

console.log(newChartData);

Ответ №2:

Вот так:

 let chartOne = [
  {
    Category: "cat1",
    Count: 11,
  },
  {
    Category: "cat2",
    Count: 14,
  },
  {
    Category: "cat3",
    Count: 21,
  },
];

let out = [[], []];
for (let x of chartOne) {
  let [labels, values] = out;
  labels.push(x.Category);
  values.push(x.Count);
}

console.log(out);

// prints
=> [ [ 'cat1', 'cat2', 'cat3' ], [ 11, 14, 21 ] ]