GoogleSheetsAPIで取得したJSONをNuxt.jsで読み込む形式にしたい

Question

前提

Nuxt.js で JSON ファイルを読み込んで v-for で展開するのに
スプレッドシート
↓
Google Cloud Platform
↓
json
↓
Nuxt.js
の流れで進めております。

実現したいこと

取得したjsonをNuxt.jsで読み込める形式に変更したいのです。

該当のソースコード

● Google Cloud Platformで
スプレッドシートのjsonを取得すると、
下記のような配列で表示されます。

{
  "range": "'sheet01'!A1:B1",
  "majorDimension": "ROWS",
  "values": [
    [
      "Time",
      "Title",
      "Day01",
      "Number01"
    ],
    [
      "2022/03/27 9:00:00",
      "001",
      "27",
      "0001"
    ],
    [
      "2022/03/28 10:00:00",
      "002",
      "28",
      "0002"
    ],
    [
      "2022/03/29 11:00:00",
      "003",
      "29",
      "0003"
    ]
  ]
}

変更したい形式

● このデータを下記のような
Nuxt.jsで読み込める形式に変更したいのです。

[
 {
  "Time":"2022/03/27 9:00:00",
  "Title":"001",
  "Day01":"27",
  "Number01":"0001"
 },
 {
  "Time":"2022/03/28 10:00:00",
  "Title":"002",
  "Day01":"28",
  "Number01":"0002"
 },
 {
  "Time":"2022/03/29 11:00:00",
  "Title":"003",
  "Day01":"29",
  "Number01":"0003"
 },
]

現在の設定

現在は下記のようなNuxtの設定でjsonを読み込んでおります。

<script>
 export default {
  async asyncData({ $axios }) {
   // 取得先のURL
   const url = "https://sheets.googleapis.com/v4/spreadsheets/xxxxxxxxxx/values/xxxxxx?key=xxxxxx";
   // リクエスト（Get）
   const response = await $axios.$get(url);
   // 配列で返ってくるのでJSONにして返却
   return {
    items: response
   };
  },
  data() {
   return {
    items: [],
     sort: {
      key: 'id',
      isAsc: true
     }
    }
  },
  computed: {
   result: function () {
   let list = this.items.slice();
   return list;
   }
  }
 }
</script>

わかりにくい部分もあるかもしれませんが、
何卒！ご教授を。よろしくお願いいたします。

Answer 1

こんな感じでしょうか。

function convertResponse(json) {
  const keys = json.values[0];
  const array = [];
  for (let i = 1; i < json.values.length; i++) {
    array.push(keysAndValues(keys, json.values[i]));
  }
  return array;
}

function keysAndValues(keys, vals) {
  const obj = {};
  for (let i = 0; i < keys.length; i++) {
    obj[keys[i]] = vals[i];
  }
  return obj;
}

const json = JSON.parse(`
{
  "range": "'sheet01'!A1:B1",
  "majorDimension": "ROWS",
  "values": [
    [
      "Time",
      "Title",
      "Day01",
      "Number01"
    ],
    [
      "2022/03/27 9:00:00",
      "001",
      "27",
      "0001"
    ],
    [
      "2022/03/28 10:00:00",
      "002",
      "28",
      "0002"
    ],
    [
      "2022/03/29 11:00:00",
      "003",
      "29",
      "0003"
    ]
  ]
}
`);

const items = convertResponse(json);
console.log(items);

/* 結果は
[
  {
    Time: '2022/03/27 9:00:00',
    Title: '001',
    Day01: '27',
    Number01: '0001'
  },
  {
    Time: '2022/03/28 10:00:00',
    Title: '002',
    Day01: '28',
    Number01: '0002'
  },
  {
    Time: '2022/03/29 11:00:00',
    Title: '003',
    Day01: '29',
    Number01: '0003'
  }
]
*/

無理やり 1 行で書くとこうなります。

const items = json.values.slice(1).map(vals => json.values[0].reduce((obj, key, i) => ({ ...obj, [key]: vals[i] }), {}));

Comments

[TENTO]

早速の回答、ありがとうございます！
自分の知識不足で、Nuxtへの取り入れ方がわかりませんでしたが、
JSON.parse()　を利用するということですね。　

いただいたソースを元に挑戦してみます！
本当にありがとうございます。

[hoshi-takanori]

convertResponse と keysAndValues の 2 つの関数を組み込んで、API の結果を convertResponse で変換すれば良いはず。

// 配列で返ってくるのでJSONにして返却
return {
items: convertResponse(response)
};

JSON.parse は文字列からテストデータに変換するために使ってるだけで、実際に API を叩く場合は axios がやってくれます。