質問

PHPの関数「json_encode」を用いて、sqlite3から読みだしたデータをJSON化しました。

※$rowsには、sqlite3から読みだしたデータが入っています。

php
1json_encode($rows, JSON_UNESCAPED_UNICODE)

この処理を行うPHPに、jQueryのajax関数を用いてjson_encodeの結果を取得します。
この時、返って来たJSONは、JSON Pretty Linter Ver2でエラーはありませんでした。

しかし、Handlebarsでは値が表示されませんでした。

とりあえず、そのJSONをコピペし、直接

JavaScript
1data = {JSONの内容};

と貼り付けてHandlebarsのコンパイルを通すと、普通に表示されます。
これは、変数に入っているか、直接コピペするかの違いしか無いはずです。

なのに、なぜ変数では表示されないのでしょうか？
理由が全くわかりません。

お分かりに方がいらっしゃいましたらご教授ください。
お願い致します。

追記

JSONを創るPHP

php
1<?php
2// DB操作開始
3$dbh = new PDO('sqlite:../db/data.db');
4
5// DBからデータ取得
6$sth = $dbh->prepare("select * from reservation");
7$sth->execute( );
8
9$result = "";
10
11while( $rows = $sth->fetch() ){
12	$result .= json_encode($rows, /*JSON_PRETTY_PRINT && */JSON_UNESCAPED_UNICODE) .",";
13}
14
15//最後の一文字(余分な「,」)を削除
16$result = substr($result, 0, -1);
17
18$result = '{' ."". '"reservation":['."". $result ."]}";
19echo preg_replace("/\s/", "", $result);
20
21$dbh = null;
22
23?>

JSONをPHPから受け取る部分

html
1	<div id="reservation"></div>
2	<script>
3	$(document).ready(function(){
4		$.ajax({
5			type: "GET",
6			url: "./operation/get_reservation.php",
7		}).done(function(data){
8			var template = Handlebars.compile( $('#reservation-template').html() );
9			$("#reservation").html(template(data));
10		});
11	});

Handlebarsの記述

html
1<!-- handlebarsの設定（ランキング用） -->
2	<script type="text/x-handlebars-template" id="reservation-template">
3		<table class="reservation">
4			<tr>
5				<td>予約番号</td>
6				<td>予約時間</td>
7				<td>お名前</td>
8				<td>支払方法</td>
9				<td>予約人数</td>
10				<td>備考</td>
11				<td>雨天</td>
12			</tr>
13
14
15			{{#each reservation}}
16			<tr>
17				<td>{{id}}</td>
18				<td>{{hour}}：{{minute}}</td>
19				<td>{{name}}</td>
20				<td>{{pay}}</td>
21				<td>{{num}}</td>
22				<td>{{other}}</td>
23				<td>{{rain}}</td>
24			</tr>
25			{{/each}}
26
27
28		</table>
29	</script>

kei344

2016/05/21 14:06

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

nnahito

2016/05/23 05:35

プログラムを追記いたしましたので、ご回答をお願い致します

行動規範の内容に同意します

回答3件

ベストアンサー

ajaxで受け取った値をパースしていない様に見えます。

JavaScript
1$.ajax( /* 略 */ ).done( function( data ) {
2	// 今の書き方のまま受け取ったものをパース
3	data = JSON.parse( data );
4	/* 略 */
5} );
6```or
7```JavaScript
8$.ajax( {
9	type: 'GET', 
10	dataType: 'json',	// データをパースするように指定 ＝ $.getJSON
11	url: 'url'
12} ).done( function( data ) { /* 略 */ } );
13```or
14```JavaScript
15$.getJSON( 'url', function( data ) { /* 略 */ } );	// データをパースするように指定