質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

解決済

typeacriptで静的なjsonデータをaxiosで読み込みたいが404エラーが出る

Daniel0801
Daniel0801

総合スコア30

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

2回答

0リアクション

0クリップ

384閲覧

投稿2022/09/06 04:19

前提

Nuxt.js typescriptで静的なjson データを読み込んでページで一旦全データを表示させたい

下記のsteps.ts ファイルで asyncを使用してjsonデータをaxios.getしたデータを返す関数 getJsonDataを記述
vueファイルにてjsonを取得する関数を実行する

実現したいこと

typescriptで取得したjsonデータをフロント側に表示する。後ほどNuxtLinkでpathにそのパラメータを代入して動的にURLを遷移させる

発生している問題・エラーメッセージ

Axios 404エラーが表示される

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} code: "ERR_BAD_REQUEST" config: adapter: ƒ xhrAdapter(config) data: undefined env: {FormData: null} headers: {Accept: 'application/json, text/plain, */*'} maxBodyLength: -1 maxContentLength: -1 method: "get" timeout: 0 transformRequest: [ƒ] transformResponse: [ƒ] transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false} url: "~/assets/json/step.json" validateStatus: ƒ validateStatus(status) xsrfCookieName: "XSRF-TOKEN" xsrfHeaderName: "X-XSRF-TOKEN" [[Prototype]]: Object message: "Request failed with status code 404" name: "AxiosError" request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} response: {data: {…}, status: 404, statusText: 'Not Found', headers: {…}, config: {…}, …} [[Prototype]]: Error

該当のソースコード

・jsonデータを読み込んで丸々返す typescriptファイル

steps.ts

import axios from 'axios'; export function setGuide() { async function getJsonData() { const { data } = await axios.get('~/assets/json/step.json') console.log({data}) return { data } } return { getJsonData, }; }

・データを表示させたいvueファイル

index.vue

<template> <div> {{ jsonData }} </div> </template> <script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api'; import { setGuide } from '~/libs/setups/steps'; import { wrapAsyncData } from '~~/src/libs/error-handling'; export default defineComponent({ asyncData: wrapAsyncData(async () => { const { getJsonData } = setGuide(); return { jsonData: await getJsonData(), }; }), }); </script>

試したこと

404エラーなのでtypescript内でのjsonファイルの読み込めていないのかなと思い、相対パスや@/ルートディレクトリにしてみたものの、同様のエラーが表示される

補足情報(FW/ツールのバージョンなど)

読み込みたいjsonファイルデータ(一部省略)

json

[ { "id": 1, "title": "ご利用手順", "contents": [ { "id": 2, "title": "はじめての方", "contents": [ { "id": 3, "title": "yucacy の使い方", "contents": [ { "id": 4, "title": "項目のタイトル", "contents": [ { "id": 5, "title": "説明のタイトル", "body": "ご利用手順の内容が入ります。ご利用手順の内容が入ります。ご利用手順の内容が入ります。ご利用手順の内容が入ります。" } ] } ] } ] } ] } } ]

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。