サーバー上のJSONファイルをJavaScriptで取得する方法

Question

やりたいこととエラー

不変の大量のデータオブジェクトを今までjsファイルで小分けして、それぞれHTML側で順に呼んでいたのですが、いちいち書くのが冗長な気がしたのでデータをJSONファイルにまとめてメインのjsから読み込みたいと思います。

ちょうどCDNでVue.jsを使っていたのでaxiosを使って読み込もうと思ったのですが、先にDOMが読み込まれてデータの格納前に参照されるのかプロパティがundefinedだとエラーを吐いてしまいます。

どうすればよいのでしょうか？文章だけですみません。

Answer 1

どのようなコードを書かれているか分からないため、基本的な対策をいくつか挙げさせていて頂きます。
コード中のdataObjectがJSONデータになります。

• axiosでの通信を同期処理にする

data: {
  dataObject: null
}

methods: {
  async callApi() {
    this.dataObject = await axios.request({...})
  }
}

• computedメソッドでデータ読込完了時にDOMが切り替わるようにする

data: {
  responseData: null
}

methods: {
  callApi() {
    axios.request({...}).then(response => {
      this.responseData = response.data
    })
  }
}

computed: {
  dataObject() {
    // || の右側にはAPIレスポンスを受け取っていない段階での初期値を設定する
    return this.responseData || {}
  }
}

• v-ifで読み込み完了までDOMが表示されないようにする

<template>
  <div v-if="dataObject">
    <!=- ... -->
  </div>
</template>

• SSR (サーバサイドレンダリング)

コードは書ききれないため、省略します

Comments

[yuhigash]

SSR以外の対策は、JSONデータの量によっては、DOMが完全に描画されるまで時間がかかります。
この場合、ユーザの離脱率に大きく影響が出てしまう恐れがありますので、「ローディングトランジション」の設定といった対策も合わせて実施されると良いと思います。