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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

4867閲覧

data属性の値が取得できない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/09/18 03:52

編集2015/09/25 13:12

以下のようなコードで、コンソールログに値が表示されません。
ブラウザのキャッシュ等ではなく、何が原因かわかりません・・
オブジェクトの一覧は取得できているので、その中身の参照方法かと思いますが、ご教授願います

html

1<div class="val_box"> 2 <input type="hidden" data-role='{ 3 "product_id":"27", 4 "single_amazon":"http://www.amazon.co.jp/dp/B00QLX506E?psc=1", 5 "single_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665138/", 6 "semidouble_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665145/", 7 "semidouble_amazon":"http://www.amazon.co.jp/dp/B00QLXXHPU?psc=1", 8 "double_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665152/", 9 "double_amazon":"http://www.amazon.co.jp/dp/B00QLYL4TA?psc=1", 10 }' 11> 12<input type="hidden" data-role='{ 13 "product_id":"28", 14 "single_amazon":"http://www.amazon.co.jp/dp/B00QLZE1QC?psc=1", 15 "single_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665169/", 16 "semidouble_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665176/", 17 "semidouble_amazon":"http://www.amazon.co.jp/dp/B00QLZIZL4?psc=1", 18 "double_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665183/", 19 "double_amazon":"http://www.amazon.co.jp/dp/B00QLZLZXY?psc=1", 20 }' 21 > 22</div>

javascript

1<script> 2 $('.val_box input').each(function(){ 3 console.log($(this).data('role')); // 表示される 4 console.log($(this).data('role').product_id); //undefinedになる 5 }); 6</script>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
カンマを外しましたが取得できませんでした。
<input type="hidden" data-role='{
"product_id":"28",
"single_amazon":"http://www.amazon.co.jp/dp/B00QLZE1QC?psc=1"
"single_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665169/"
"semidouble_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665176/"
"semidouble_amazon":"http://www.amazon.co.jp/dp/B00QLZIZL4?psc=1"
"double_rakuten":"http://item.rakuten.co.jp/elmin-store/4580273665183/"
"double_amazon":"http://www.amazon.co.jp/dp/B00QLZLZXY?psc=1"
}'

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

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

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

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

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

think49

2015/09/20 23:40

「date属性→data属性」の修正をお願いします。 また、「カンマを外しましたが取得できませんでした」の下りも markdown 形式で HTML を書いていただけますようお願い致します。
guest

回答3

0

JSONでは、最後のプロパティの後にコンマを打つと文法違反になります。そのためJSONでなくただの文字列だとjQueryに認識されています。

javascript

1 "double_amazon":"http://www.amazon.co.jp/dp/B00QLYL4TA?psc=1", //←最後はコンマが不要

投稿2015/09/18 04:02

maisumakun

総合スコア145123

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

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

0

ベストアンサー

jQuery 2.1.3 でいくつか試しましたが、全て期待通りに動作しますね。
jsfiddleにコードをUPしましたのでご確認下さい。

JavaScript

1jQuery('.val_box input').each(function (i, element) { 2 console.log(jQuery(element).data('role')); 3 console.log(jQuery(element).data('role').product_id); 4 console.log(JSON.parse(element.getAttribute('data-role')).product_id); 5});

jQuery のバージョンが古くて data-role 属性の JSON.parse 機能が搭載されていないという事はないでしょうか。

投稿2015/09/20 23:41

think49

総合スコア18156

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

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

0

data-role属性値がjsonのオブジェクトとして認識されていないようですね。

double_amazonの行の最後のカンマを取り除いてみてください。

投稿2015/09/18 04:11

rk7fd3s

総合スコア61

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

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

rk7fd3s

2015/09/18 04:15

回答かぶっちゃいました。 JSONとして正しいか確認するには、 http://jsonlint.com/ が便利です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問