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

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

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

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

JSON

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

5133閲覧

Vue.jsでaxiosを使ってphpからJsonでデータを受取りDATAプロパティに格納したい

jinn614

総合スコア12

Vue.js

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

JSON

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1グッド

2クリップ

投稿2020/03/06 13:24

前提・実現したいこと

Vue.jsの学習のためにシンプルなニュースアプリをローカルで作っています。
(プログラミングを独学している初心者です)

Vue.jsでaxiosを使ってphpからデータを受取り、
Vue.jsのdataプロパティに値を格納する所で苦戦しています。

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

phpでは、DBから連想配列の形でデータを取り出し、
それをjson_encodeしてreturnしています。

僕の理解だと、このphpファイルにVue.jsからaxiosでアクセスして、
レスポンスされたデータをJSON.parseで変換すれば、
Vue.jsのDATAプロパティに格納できる...と考えているのですが、JSON.parse時に下記のエラーがでます。

SyntaxError: Unexpected token s in JSON at position 0 at JSON.parse (<anonymous>) at app.js:14

該当のソースコード

Vue

1let url = 'http://localhost/kaigaigumi/mysql.php'; 2 3var app = new Vue({ 4 el:'#app', 5 data: { 6 posts:[], 7 }, 8 mounted() { 9 this.getDatas(); 10 }, 11 methods:{ 12 getDatas(){ 13 axios.get(url).then((response) => { 14 this.posts = JSON.parse(response.data); 15 console.log(this.posts); 16 }).catch((error) => { 17 console.log(error); 18 }); 19 } 20 } 21})

php

1header('Access-Control-Allow-Origin: *'); 2 3try { 4 $pdo = new PDO('mysql:host=127.0.0.1;dbname=dbbame;charset=utf8','root','root', 5 array(PDO::ATTR_EMULATE_PREPARES => false)); 6 } catch (PDOException $e) { 7 exit('データベース接続失敗。'.$e->getMessage()); 8 } 9 10$sql = "SELECT * FROM news ORDER BY published DESC LIMIT 4"; 11 12$prepare = $pdo->prepare($sql); 13 14$prepare->execute(); 15 16$results = $prepare->fetchAll(PDO::FETCH_ASSOC); 17 18$results = json_encode($results,JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT); 19 20var_dump($results); 21 22return $results;

phpの方でreturnしている値は下記のような内容になっています。

string(1714) "[ { "id": 68, "title": "久保建英に大きく立ち塞がる“ファミリー”の壁 - スペイン発サッカー紀行 - 海外サッカーコラム - 日刊スポーツ", "published": "Wed, 30 Oct 2019 07:00:00 GMT", "image": "https://www.nikkansports.com/soccer/world/column/fromspain/news/img/201910300000299-w500_0.jpg", "link": "https://www.nikkansports.com/soccer/world/column/fromspain/news/201910300000299.html" }, { "id": 54, "title": "久保建英の現状は「かわいそう」。後輩を慮りつつ充実の香川真司。(工藤拓) - Number Web", "published": "Wed, 29 Jan 2020 08:00:00 GMT", "image": "https://number.ismcdn.jp/mwimgs/d/5/-/img_d599ef67a62c1df8f98e5e1bf104da45180831.jpg", "link": "https://number.bunshun.jp/articles/-/842324" }, { "id": 64, "title": "「18歳に見えない」久保建英、マジョルカ移籍はバルサ時代のコーチが影響? - ゲキサカ", "published": "Wed, 28 Aug 2019 07:00:00 GMT", "image": "https://f.image.geki.jp/data/image/news/2560/284000/283400/news_283400_1.jpg", "link": "https://web.gekisaka.jp/news/detail/?283400-283400-fl" }, { "id": 44, "title": "久保建英がバルサを選ばなかった理由。世界一の育成組織がグラグラだ - Sportiva", "published": "Wed, 26 Jun 2019 07:00:00 GMT", "image": "https://sportiva.shueisha.co.jp/clm/football/wfootball/2019/assets_c/2019/06/kubotakehusa20190625-thumb-600x400-220215.jpg", "link": "https://sportiva.shueisha.co.jp/clm/football/wfootball/2019/06/26/post_64/" } ]"

試したこと

エラーでググると変換できない値が入ってる可能性があるとのことだったで、
試しにphpからreturnする値を下記くらいにシンプルなものにしてみました。

{"value1":1,"value2":2,"value3":3,"value4":4,"value5":5}

しかし、エラー内容は全く同じものが表示されました。

ということは、returnしている値の中に原因があるのではなく、
ここまでの手順の中で何か足りていない処理などがあるのでしょうか??

ここからの切り分け方針の判断もつかず困っています。

どうにかphpから受け取った値をVue.jsのDATAプロパティに格納して使いたいです。

知識ある方アドバイスお願いします><

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

PHP 7.4.3
Vue.js v2.6.11

seastar3👍を押しています

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました!

phpから値を返す時にreturnじゃなくてechoで返せばできました。(JSON.parse不要)

投稿2020/03/06 17:03

jinn614

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問