Q&A
前提
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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/03/31 13:19
2022/03/31 14:04