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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

Q&A

3回答

718閲覧

ブラウザのresponseにはaxiosでデータが取れているのが確認できるが、consoleで出すと、空になっている

yuki55snowman

総合スコア6

Vue.js

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

0グッド

0クリップ

投稿2023/05/19 02:57

編集2023/05/19 04:45

実現したいこと

・Vueの処理でデータをaxiosで取得したい

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

browserのレスポンスには、データが返ってきているが、axiosからのレスポンスには
dataが空になっている。

エラーなし

該当のソースコード

js

1const uri = parseUri(window.location.search); 2const query = queryToObject(uri.query); 3 4 5try { 6 if (!query.id.match(/^\d+$/)) { 7 throw new Error("Invalid parameter"); 8 } 9 10 var res_data; 11 // 非同期でデータ取得 12 axios({ 13 method : 'GET', 14 url : 'data.json', 15 responseType : 'json' 16 }).then(function (response) { 17 res_data = response.data; 18      //ここが空になる 19 console.log(res_data) 20 }).catch(function (error) { 21 console.log(error); 22 }); 23} catch (e) { 24 console.log(e); 25} 26

data.json

1{ 2 3"0001": 4 { 5 "id": "0001", 6 "number": "-asd-1", 7 "name": "", 8 "pf_type_id": "", 9 "pf_type_name_j": "", 10 "position": "5840558834058034860586805068506", 11 "pictures": [ 12 "/file/test1.jpg", 13 "/file/test2.jpg", 14 "/file/test3.jpg", 15 "", 16 "", 17 "" 18 ], 19 "pf_files": [ 20 21 { 22 "pf_file": { 23 "date": "2007年3月29日" , 24 "title": "testのお知らせ" , 25 "path": "/file/testtestetst.jpg", 26 "size": "18.3KB", 27 "icon": "pdf", 28 "icon_upper": "PDF" 29 } 30 }, 31 32 { 33 "pf_file": { 34 "date": "2007年3月29日" , 35 "title": "testのお知らせ" , 36 "path": "/file/testtestetst.jpg", 37 "size": "18.3KB", 38 "icon": "pdf", 39 "icon_upper": "PDF" 40 } 41 }, 42 43 { 44 "dummy": "" 45 } 46 ], 47 } 48}

試したこと

ファイルパスをフルパスにする。
axiosの指定を試す

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

※見えてはいけないデータは変更していますので、画像と一致しない部分はあります。
レスポンスがbrowserでは返ってきているのに、vueでは取れない
イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki55snowman

2023/05/19 04:57

responseTypeを消したら動きました。jsonでない??
guest

回答3

0

responseTypeを指定した場合はJSON化するので、それをオブジェクトに返すためにはJSON.Parseが必要なはずです。

responseType: 'text' return Json Object

あと、axiosをVueで使う場合は以下の書き方で問題ないはずです。

vue

1axios.get( 'data.json').then(function (response) { 2 console.log(response.data) 3})

投稿2023/06/28 06:01

編集2023/08/01 08:39
FKM

総合スコア3647

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

では返ってきているのに、vueでは取れない

そりゃそうでしょうね。戻ってきたものを17行目でvueに渡しているつもりなのでしょうが、設定した先は10行目で定義している変数 res_data。vueに渡しているようにはみえない。そりゃ「vueでは取れない」でしょう。

js

19 210 var res_data; 311 // 非同期でデータ取得 412 axios({ 5... 616 }).then(function (response) { 717 res_data = response.data;

投稿2023/05/19 04:15

shiketa

総合スコア4006

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

axiosの場合はresponse.dataに実際のデータが入っています。
わざわざres_dataのように代入しているわけですから、それを使いましょう。

js

1res_data = response.data; 2console.log(res_data)

投稿2023/05/19 04:11

pippi19

総合スコア684

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問