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

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

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

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

JSON

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

SQL

SQL(Structured Query Language)は、リレーショナルデータベース管理システム (RDBMS)のデータベース言語です。大きく分けて、データ定義言語(DDL)、データ操作言語(DML)、データ制御言語(DCL)の3つで構成されており、プログラム上でSQL文を生成して、RDBMSに命令を出し、RDBに必要なデータを格納できます。また、格納したデータを引き出すことも可能です。

PHP

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

Q&A

解決済

4回答

2907閲覧

SQLからPHPでデータを取得すると、二重に出力される

tara-tail

総合スコア32

Vue.js

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

JSON

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

SQL

SQL(Structured Query Language)は、リレーショナルデータベース管理システム (RDBMS)のデータベース言語です。大きく分けて、データ定義言語(DDL)、データ操作言語(DML)、データ制御言語(DCL)の3つで構成されており、プログラム上でSQL文を生成して、RDBMSに命令を出し、RDBに必要なデータを格納できます。また、格納したデータを引き出すことも可能です。

PHP

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

0グッド

0クリップ

投稿2021/04/05 07:28

##やりたいこと
HTML(Vue.js使用)からPHPを経由して、SQLのデータを取得したいと考えています。

問題の事象

axiosを使用して、一応JSONデータを取得して表示することができたのですが、同じカラムが二つ取得されてしまいます。一つはカラム番号(0, 1, 2など)、もう一つはカラム名(id, name, created_atなど)です。
説明が難しいので、以下の「表示結果」をみていただければと思います。

表示結果

{ "0": "1", "1": "あいうえお", "2": "2021-02-05 14:33:51", "id": "1", "name": "あいうえお", "created_at": "2021-02-05 14:33:51" }

{ "0": "2", "1": "かきくけこ", "2": "2021-02-05 14:41:54", "id": "2", "name": "かきくけこ", "created_at": "2021-02-05 14:41:54" }

{ "0": "3", "1": "さしすせそ", "2": "2021-02-05 14:33:51", "id": "3", "name": "さしすせそ", "created_at": "2021-02-05 14:33:51" }
##コード

html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>SQLの値をJSONで取得</title> 6</head> 7<body> 8 <div id="app"> 9 <button @click="show()">JSONを表示</button> 10 <div v-for="itm in posts"> 11 <p>{{ itm }}</p> 12 </div> 13 </div> 14 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 15 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 16 <script> 17 new Vue({ 18 el: '#app', 19 data: { 20 posts: null 21 }, 22 methods: { 23 show: function() { 24 let self = this 25 axios.get('http://localhost:88/php/list.php').then(function (response) { 26 self.posts = response.data 27 }).catch((error) => { 28 console.log(error) 29 }) 30 } 31 } 32 }) 33 </script> 34</body> 35</html>

sql

1// mydb > memos 2id | name | created_at 31 | あいうえお | 2021-02-05 14:33:51 42 | かきくけこ | 2021-02-05 14:41:54 53 | さしすせそ | 2021-02-05 14:33:51

php

1<?php 2// SQLに接続する 3try { 4 $db = new PDO('mysql:dbname=mydb; host=xxx.xxx.xxx.xxx; charset=utf8', 'xxxx', 'xxxx'); 5} 6catch(PDOException $e) { 7 echo 'DB接続エラー: ' . $e -> getMessage(); 8} 9 10$memos = $db -> query('SELECT * FROM memos'); 11// 各データを取り出す 12$list = array(); 13foreach ($memos as $memo) { 14 $list[] = $memo; 15} 16echo json_encode($list); 17?>

##実現したいこと
JSONデータの最初の部分「"0": "1", "1": "あいうえお", "2": "2021-02-05 14:33:51",」が、なぜ取得されてしまうのかが分かりません。できれば、後方のカラム名だけのJSONデータを取得したいと思っています。
ご教示のほど、よろしくお願いいたします。

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

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

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

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

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

guest

回答4

0

ベストアンサー

JSONデータの最初の部分「"0": "1", "1": "あいうえお", "2": "2021-02-05 14:33:51",」が、なぜ取得されてしまうのかが分かりません。

PHP: PDO::query - Manual
query()の第2引数 int $fetch_style 以降の指定がないため、
PHP: PDOStatement::fetch - Manualの説明にある、PDO::FETCH_BOTHっていうモードでデータを取得しているものと思われます。
PHP: PDOStatement::setFetchMode - ManualでPDO::FETCH_ASSOCを指定すれば回避できますが。

ところで、老婆心での助言ですが、
「SELECT * FROM memos」なんて全レコードを読み出すクエリーは、
当初数十行程度なら問題なくても、
1000行とか1万行とか10万行のデータになったときにどうするんでしょうって心配をします。
なんらかの基準でデータの並び順を設けつつ、
例えば10件だけ取得するみたいな制御(ページネーションって言います)を考慮するならば、
query()じゃなく、prepare()→bindValue()→execute()するやり方に
いずれ切り替えないといけないかと思います。

投稿2021/04/05 07:52

編集2021/04/05 07:55
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

tara-tail

2021/04/06 00:29

設計まで教えていただき、ありがとうございました。大規模データに備えて、変更したいと思います。
guest

0

FETCH_ASSOCをデフォルトに設定しておくのがベター

$db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

投稿2021/04/05 07:44

yambejp

総合スコア116724

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

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

tara-tail

2021/04/06 00:29

ご回答ありがとうございます。シンプルな記載で、使ってみたいと思います。
yambejp

2021/04/06 00:46

ちなみに、select id,id,id from tblのような同じ名前で参照するような場合 本来であればそれぞれのカラムに別名をつけますが、 fetch(PDO::FETCH_NUM)で処理すれば、カラム番号で得られるので便利です 一見意味がないようなSQL文ですがOUTER JOINを利用したりすると 必要な場合がないことはないです。(それも別名をつけるのが一番ですが)
tara-tail

2021/04/06 01:18

なるほど、そういう使い方もあるのですね。勉強になります。使い分けられるように頑張ります。 追加のコメント、誠にありがとうございました。
guest

0

PHP

1$memos = $db -> query('SELECT * FROM memos');

PHP

1$memos = $db -> query('SELECT * FROM memos'); 2$memos->setFetchMode(PDO::FETCH_ASSOC);

とすると、カラム名をキーとした連想配列のみが取得できます。
(デフォルトでは質問にある通り、単純配列と連想配列の両方が取得されます。)

fetchModeの詳細は
PDOStatement::setFetchMode

PHP PDO fetchModeで検索してみて下さい。

投稿2021/04/05 07:41

tanat

総合スコア18727

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

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

tara-tail

2021/04/06 00:30

ご回答ありがとうございます。自分の記載に沿う回答で、すぐに使えそうです。
guest

0

有名なPDOの罠で、無指定だとインデックスとキーの双方が二重に取得される仕様があります。
それを回避するには

$list = array(); foreach ($memos as $memo) { $list[] = $memo; }

ここを

$list = array(); foreach ($memos as $memo) { $list[] = $memo[0]; $list[] = $memo[1]; $list[] = $memo[2]; … }

このようにして明示的にインデックスを記載するか、$memos -> fetch(PDO::FETCH_ASSOC)のようにfetchメソッドを使うかしましょう。

//自動翻訳されて表示される場合もあります
php - 二重の結果を返すPDO準備済みステートメントfetch()

投稿2021/04/05 07:40

編集2021/04/05 07:41
FKM

総合スコア3647

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

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

tara-tail

2021/04/06 00:34

ご回答ありがとうございます。fetchメソッドも活用したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問