まとめの限定公開に「リンク限定」が追加されました。URLを伝えてまとめを共有しよう!

jQueryのgetJSONで読み込むjsonの要素名に-(ハイフン)使った顛末

jQueryのgetJSONを使ってjsonを読み込む際、要素名に-(ハイフン)を使うと表示されないエラーを解決した(してもらった)ときの話。 「そもそもハイフンは区切り記号じゃねぇ!」というご指摘はごもっともですが、ECなんかで商品番号や型番をキーにする場合など、どうしてもハイフンを入れたい状況というのはあるものです。
プログラミング jQuery getjson JSON JavaScript
18640view 3コメント
1
読書家の長尾さん @wildwest_kazya
@aWebprogrammer それはそうとワテさん。jQueryのgetJSONで引っ張ってきたjsonって要素名にハイフン使えないんすかね? ハイフン入れたら読み込んでくれなくて、ハイフン抜いたらちゃんと表示されるんですが(`・д´・ ;)
ワテ @aWebprogrammer
@wildwest_kazya JSONの書き方にもよりますけど、要素部分を「”」でくくらないとエラーになるような気はするー
ワテ @aWebprogrammer
@wildwest_kazya あっ、勘違いしてた、「ちゃんと"でくくってればエラー出ない」っていう部分で言えば、JSONの仕様として「"」でくくらないと仕様的にまずいと思う => http://t.co/YfMwQQCUbM
読書家の長尾さん @wildwest_kazya
@aWebprogrammer うい、そこんとこはググッたので大丈夫かと。今書いてたのが{"ac-db":{"name":"肉","price":1250}} ってjsonで、ac-dbのハイフンが入ると表示されないんすよねぇ(-ω- )
ワテ @aWebprogrammer
@wildwest_kazya あっ、もしかして、「item.ac-db」とかって書いてる?

ちなみに、このときこんな書き方でjsonを読み込んでた。

======
$.getJSON("data.json", function(items) {
$("#items").append(
"<h1>" + items.ac-db.name + "</h1>"
)
});
======

この中のitems.ac-dbってなってるところをitems['ac-db']にしないといけなかったらしい。

ワテ @aWebprogrammer
@wildwest_kazya やっと理解しましたw、だったら、書き方を「item[’ac-db’]」って書き方に変えればいけるかとー
ワテ @aWebprogrammer
@wildwest_kazya ドットシンタックス形式で表記すると、ハイフンが演算子扱いになっちゃうんで、ハイフンなんかが入ってる場合は、さっきみたいに連想配列形式の書き方にしないと動いてくれないっすー
読書家の長尾さん @wildwest_kazya
@aWebprogrammer なるほど。いっかい連想配列形式の書き方にはしてたんですが、そんときクォーテーションつけ忘れちゃってたんで動かなかったんですな、きっと。(・ω・)fmfm
ワテ @aWebprogrammer
@wildwest_kazya 普通に書いちゃうと、数式になっちゃうんでクォーテーションでくくって文字列扱いで指定してやらないと、確かに連想配列形式でもエラーが出ますなー

コメント

ちーたそ提督 @cheetaso 2013年3月29日
jQuery関係ないじゃん。JavaScriptの文法の話。
読書家の長尾さん @wildwest_kazya 2013年3月29日
補足ありがとうございます。 問題となる部分はjQuery独自のものではありませんが、後々ウェブ検索で解決法をお探しの方の検索キーワードを考慮して、「jQuery」「getJSON」「-(ハイフン)」を含めたタイトル付けをさせていただいています。 自分が「javascript ハイフン」や「jQuery json ハイフン」などで検索した際にクリティカルな内容が出てきませんでしたので、同じように悩んだ方の一助となることを考慮しています。
たるたる @heporap 2013年3月30日
JSONの文法は{"name":"heporap"}のように、プロパティ名にダブルクォーテーション(シングルクォーテーションではない)が必要。JavaScriptの文法では{name:'heporap'}でも可能。
ログインして広告を非表示にする
ログインして広告を非表示にする