jQueryクックブック レシピ5.11 テーブルをすばやく読み込む サンプルコードが動かない

jQuery入門にはかなり高度な本を選んでしまいました。
レシピを1個1個実行しながら、レシピ5.11まで来たのですが、レシピ5.11のコードが動きません。

=========以下抜粋=========
JSONデータのフォーマットは次のとおり。

{
"names": [
{
"first": "Azzie",
"last": "Zalenski",
"street": "9554 Niemann Crest",
"city": "Quinteros Divide",
"state": "VA",
"zip": "48786"
},
// このフォーマットのデータが1,000個ある
]
}

JavaScriptコードは次のとおり。

// HTML用に&、<、>がエスケープされたテキストを返す
function esc( text ) {
return text
.replace( '&', '&amp;' )
.replace( '<', '&lt;' )
.replace( '>', '&gt;' );
}
$(document).ready( function() {

function fillTable( names ) {
$.each( names, function() {
$('<tr>')
.append( $('<td>').addClass('name').html(
esc(this.first) + ' ' + esc(this.last)
) )
.append( $('<td>').addClass('address').html(
esc(this.street) + '<br />' +
esc(this.city) + ', ' +
esc(this.state) + ' ' + esc(this.zip)
) )
.appendTo('#nameTable');
});
}

$.getJSON( 'names/names-1000.json', function( json ) {
fillTable( json.names );
});
});

そして、ドキュメントには次のHTMLコードが含まれている。

<table id="nameTable">
</table>
=========以上抜粋=========

JSONデータというものは実際に1000個作らずにサンプルと全く同じ(コメント含む)ものを用意しました。
jQueryモジュールは1章で学習したようにファイルの先頭で、
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/ …
と記述して読み込んでいます。
本によると、これで1000件の住所録が表示されるはずなのですが、
しかしchromeでは何も表示されませんし、エラーメッセージも何も表示されません。
これを正しく動かすために修正すべき個所を提示していただきたく、質問に参りました。

No.1 ベストアンサー 回答者： sukitaro 回答日時： 2021/09/18 19:22

jsonはコメント文があったりすると読み込めないみたいです。

参考：
https://macoblog.com/js_read_json/

仮に、jsonを以下のようにしてみたら、
もしかしたらうまくいくかもしれません。

{
"names": [
{
"first": "Azzie1",
"last": "Zalenski1",
"street": "9554 Niemann Crest1",
"city": "Quinteros Divide1",
"state": "VA1",
"zip": "487861"
},
{
"first": "Azzie2",
"last": "Zalenski2",
"street": "9554 Niemann Crest2",
"city": "Quinteros Divide2",
"state": "VA2",
"zip": "487862"
}
]
}

この回答へのお礼

初心者丸出しの質問をしてしまいました。
ご指摘のとおりでした。

なぜ、こんなにも初歩的な質問をしてしまったのか。
いいわけ、というか備忘録のためにも、ここに記載させてください。
信じてほしいのですが、私も当初はコメントや、最後のコンマが原因なのではと思い、これを消して試したりしていました。
もうお気づきかもしれませんが、なんとChromeは普通に再読み込みしただけではjsonを読みに行かないようです。
なので、どんなにjsonを直そうが、ずっと動かなかったのです。
常識ですか。さいですか^^

お礼日時：2021/09/19 01:06

No.2 回答者： fujillin 回答日時： 2021/09/18 20:29

こんばんは

＞エラーメッセージも何も表示されません。
consoleにエラーが表示されていませんか？？

簡単なテストをしてみましたが、jsonデータが正しくできていれば、ご提示のスクリプトで動作します。

原因として、ありそうなものは・・・
　・配列の最後にも「,」が付けられている。
　・ローカル環境で実行している。
（ajaxの場合、サーバ環境でないとcross originに引っかかる）
あたりではないかと思いますけれど…

※ なお、ご質問には関係ありませんけれど、利用なさっているjQueryが大分旧いので、もう少し最近のバージョンでも良いのではないかとも思います。
https://developers.google.com/speed/libraries

この回答へのお礼

普段はChromeのconsoleがエラーを教えてくれるのですが、今回はconsoleには何も表示されませんでした。
jsonまでは見てくれないのでしょうかね。。。
原因はjsonの初歩的な記述ミスでした。
No.1さんへのお礼も見ていただけるとうれしいです。
当方オライリー信者のため、今回このような古い本を買ってしまいました。
現在オライリーから出版されているjQueryの書籍は、これ一択のようです^^
jQueryの古さは私も気になっていたところです。
まあ、この本のサンプルコードを実行する分には、このままのバージョンでもいいかな～と思っています。
最新版を使用するメリット、旧版を使う重大なデメリットがあれば教えてください。

お礼日時：2021/09/19 01:29