JSONを利用しようとしたら文法エラーが出続ける

JavaScriptでJSONを読み込もうと以下のようなjsonデータと
プログラムをそれぞれ作成してみました。

message.json

{
[
{
"date" : "2012/1/12 19:12",
"text" : "こんばんは"
}
,
{
"date" : "2012/1/11 19:12",
"text" : "Hello"
}
]
}

xhr_json_sample.html


<!DOCTYPE html>
<html>
<head id="header" >
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<title>Ajax Json読み込みサンプル</title>
<script>

// HTMLドキュメントからidで指定された要素を取得する
function $(id){ return document.getElementById(id); }

function requestAjax(){

// JSONをサポートしているか調べる
var element = $('editbox');
if( window.JSON ){
element.value = "対応している";
}else{
element.value = "未対応";
}

// オブジェクト生成
var req = new XMLHttpRequest();
// openメソッドでURLを指定
req.open('GET', 'message.json');
// onreadystatechangeイベントでのハンドラを指定
req.onreadystatechange = function(){
// 受信完了時には
if( req.readyState == 4 ) {
// 取得した文字列をJSONとして解釈
var json = JSON.parse(req.responseText);
// message配列内をループ
for( var i = 0; i < json.messages.length ; i++ ){
var message = json.messages[i];
// dateとtextの内容を表示
$('output').innerHTML += message.date + " : " + message.text + "<br/>";
}
}
}

// リクエストを送信
req.send(null);

}

</script>
</head>
<body>
<h1>Ajax JSON読み込みサンプル</h1>
<div id="output"> </div>
<input type="text" id="editbox" value="" />
<button onclick="requestAjax();">Ajax実行</button>
</body>
</html>

そしたら、xhr_json_sample.htmlの30行目で常にエラーが出力されるようになってしまいました。

20140903001

なにやら文法が間違っていると言っているのですが、
プログラムを見なおしている限り、そんな感じはなさそうです。

原因は?

NAVERまとめを見る限り、同じところで詰まっている人は多そうです。
プログラムの方ではなく、JSONファイルの書き方が間違っているために
文字列ではなくオブジェクトとしてJSONの返り値が来てしまっている…のかな?

で、よく見てみるとjsonファイルの冒頭に書くべき宣言を書いていませんでした。

{"messages" :
[
{
"date" : "2012/1/12 19:12",
"text" : "こんばんは"
}
,
{
"date" : "2012/1/11 19:12",
"text" : "Hello"
}
]
}

これで実行したらうまくいきました。
ローカルApacheだと修正前のJSONが読まれてしまうのはキャッシュのせいかな?


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です