Структура данных карты для Google Charts

Question

Я обращаюсь к своему бэкэнду, где я читаю файл JSON и возвращаю его в виде массива. Я делаю это, чтобы было легче с этим обращаться, это код

let url = `/api/some-url/${this.$route.params.id}`;

axios.get(url).then(data => {
    console.log(data.data);
}).catch(err => {
    console.log(err)
});

Вывод файла console.log выглядит примерно так:

(7) [Array(345), Array(5), Array(1), Array(1), Array(1), Array(1), Array(4)]
    0: (345) [{…}, {…}, {…}, {…}, …]
    1: (5) [{…}, {…}, {…}, {…}, {…}]
    2: [721]
    3: [3201]
    4: ["2012-01-08"]
    5: ["2019-05-02"]
    6: (4) [{…}, {…}, {…}, {…}]

На данный момент меня интересует массив в элементе 6. Это выглядит следующим образом

6: Array(4)
    0: {Category: "cat1", Count: 11}
    1: {Category: "cat2", Count: 24}
    2: {Category: "cat3", Count: 52}
    3: {Category: "cat4", Count: 57}

Теперь, насколько я понимаю, Google Charts требует, чтобы в первой строке массива были имена столбцов, а в каждой строке - данные. Что-то вроде

let data = google.visualization.arrayToDataTable([
   ['Year', 'Asia'],
   ['2012',  900],
   ['2013',  1000],
]);

Так что в моем случае я думаю, что это должно быть что-то одно из линий

let data = google.visualization.arrayToDataTable([
   ['Category', 'Count'],
   ['cat1',  11],
   ['cat2',  24],
   ['cat3',  52],
   ['cat4',  57]
]);

Каков наилучший способ достижения этого формата на основе моих исходных данных? Кроме того, у меня есть около 3 элементов из исходного массива, для которых нужны данные, отформатированные так, я бы сделал их по отдельности или вместе?

Спасибо

Answer 1

Вы можете использовать функции Object.keys, Object.values и Array.prototype.map, чтобы сделать эту функцию преобразования:

function JSONtoGoogleData(src) {
  return [Object.keys(src[0])].
    concat(
      src.map(
        obj => Object.values(obj)
      )
    );
}

Answer 2

Используйте map для изменения каждого элемента возвращаемого массива и map с Object.values для вложенных массивов.Первая строка - это условие, которое позволяет избежать ошибок, проверяя, какие элементы являются массивами, а какие нет.

let changed = data.data.map(e => {
    if (!e.map) return e;
    return e.map(Object.values);
}).filter(Boolean);