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

前提

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>

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

回答1件

ベストアンサー

こんな感じでしょうか。

js
1function convertResponse(json) {
2  const keys = json.values[0];
3  const array = [];
4  for (let i = 1; i < json.values.length; i++) {
5    array.push(keysAndValues(keys, json.values[i]));
6  }
7  return array;
8}
9
10function keysAndValues(keys, vals) {
11  const obj = {};
12  for (let i = 0; i < keys.length; i++) {
13    obj[keys[i]] = vals[i];
14  }
15  return obj;
16}
17
18const json = JSON.parse(`
19{
20  "range": "'sheet01'!A1:B1",
21  "majorDimension": "ROWS",
22  "values": [
23    [
24      "Time",
25      "Title",
26      "Day01",
27      "Number01"
28    ],
29    [
30      "2022/03/27 9:00:00",
31      "001",
32      "27",
33      "0001"
34    ],
35    [
36      "2022/03/28 10:00:00",
37      "002",
38      "28",
39      "0002"
40    ],
41    [
42      "2022/03/29 11:00:00",
43      "003",
44      "29",
45      "0003"
46    ]
47  ]
48}
49`);
50
51const items = convertResponse(json);
52console.log(items);
53
54/* 結果は
55[
56  {
57    Time: '2022/03/27 9:00:00',
58    Title: '001',
59    Day01: '27',
60    Number01: '0001'
61  },
62  {
63    Time: '2022/03/28 10:00:00',
64    Title: '002',
65    Day01: '28',
66    Number01: '0002'
67  },
68  {
69    Time: '2022/03/29 11:00:00',
70    Title: '003',
71    Day01: '29',
72    Number01: '0003'
73  }
74]
75*/

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

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

投稿2022/03/31 12:27

hoshi-takanori

総合スコア7819

回答へのコメント

TENTO

2022/03/31 13:19

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

hoshi-takanori

2022/03/31 14:04

convertResponse と keysAndValues の 2 つの関数を組み込んで、API の結果を convertResponse で変換すれば良いはず。 // 配列で返ってくるのでJSONにして返却 return { items: convertResponse(response) }; JSON.parse は文字列からテストデータに変換するために使ってるだけで、実際に API を叩く場合は axios がやってくれます。