画像クリック時の値の取得

入力フォームを作成していて、ある箇所まで進めるとモーダルを表示しモーダル内で画像を表示させています。

そして、その画像をクリックしたら画像のデータを取得するという処理が書きたいのですが、上手くできませんでした。

以下ソースです。

javascript
1                      //Ajaxで取得してきたデータがある場合
2                      if(json !== null){
3                        for(var i in json){
4                         $('#samplegazo').append('<li><input type="image" width="140" height="100" class="test" data-dismiss="modal" src="/img/'+json[i].cate_cd +'/'+json[i].gazo_file +'"></li>');
5                           $('#Modal').modal();
6                         }
7                       }
8
9               //モーダル内の画像クリック時の処理
10               for(i in json){
11                    $("#samplegazo").on('click','.test',function(){
12　　　　　　　　　　　　　　 //ここにクリックした画像のデータ(codeとname)を取得する処理を書きたいです。
13                          $(':hidden[name="hiddenCode"]').val(json[i].code);
14                          $('#nameselect').val(json[i].name);
15                    });               
16                }

jsonには画像を表示するだけのカラム以外にもnameやidなどのカラムも取得しています。

今の状態だと、例えば画像が3つ表示されたときに2つ目をクリックしたら3つ目の画像のデータが取れてしまいます。

よろしくお願い致します。

orange-lion

2018/02/12 07:45

jsonの型を教えてください。 `Array` なのか `Object` なのか

jun68ykt

2018/02/12 07:51 編集

完全に解決するか分からない回答なので、こちらに書きますが、ぱっと見、怪しそうなのは、for (i in json){ としているところです。これの i の前に var を追加して、for(var i in json){ としてみるとどうでしょう？

cofee

2018/02/12 07:51

jsonの型は'Object'です。

cofee

2018/02/12 07:51

ありがとうございます。ですが、for(var i in json){とやってみても変わりませんでした。

jun68ykt

2018/02/12 07:58

そうですか。よくよく見たら、$("#samplegazo") は id 指定なので1個しかない要素になりますが、これに対して、for(i in json) { } で囲ってハンドラを設定したら、ループの最後の設定だけが活かされると思います。

jun68ykt

2018/02/12 09:01 編集

・・・と思いましたが、'.test' がありました。失礼しました。

jun68ykt

2018/02/12 09:19

回答に、補足2 を追記しました。こちらをお試し頂ければと思います。

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

回答2件

ベストアンサー

こんにちは。

質問への追記、修正依頼の中で、

2018/02/12 16:51
jsonの型は'Object'です。

とのことでしたが、 for(var i in json) で Object の json に対して
ループを回したときに、これが意図した順序で json のプロパティが
取れるとは限りません。

MDN の for...in　の説明にも、以下が書かれています。

for..in 文は、指定したオブジェクトの列挙可能プロパティに対して、順不同で反復処理をします。

ですので、プログラムで明示的に意図した順序で、要素を取り出すためには、
json を配列として取得するようにAPIを見直すか、 API から JSONを
取得した後に配列にし直すという処理を入れたほうがよいかもしれません。

以上参考になれば幸いです。

補足1

stackoverflow の以下の質問
https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order

の回答で多数の Like がついているものに、ECMAScriptの仕様が以下のように引用されています。

4.3.3 Object

An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

上記で、 unordered とあるので、for(var i in json) で json のプロパティが
何らかの望ましい順序で取り出せると期待しないほうがよい、とはいえるでしょう。

他の回答を読むと、今現在の主要なjavaScript実装によっては、何らかの順序があるようですが、
今のところは、以下の回答に従うのがよさそうです。

ftor answered Jul 6 '16 at 7:38

Property order in normal Objects is a complex subject in Javascript.

** ・・・ **
** Conclusion: Even in ES2015 you shouldn't rely on the property order of normal objects in Javascript. It is prone to errors. Use Map instead. **

補足２

for..inで、オブジェクトのプロパティを何らかの順序で取り出せることを期待するのは拙い、
ということを、上記で回答しましたが、それはそれとして、json[1] で要素が取れる、つまり、
jsonのプロパティが整数なのであれば、以下のような修正をすると、意図通り動くかもしれません。

修正前

javascript
1//モーダル内の画像クリック時の処理
2for(var i in json){
3    $("#samplegazo").on('click','.test',function(){
4        //ここにクリックした画像のデータ(codeとname)を取得する処理を書きたいです。
5        $(':hidden[name="hiddenCode"]').val(json[i].code);
6        $('#nameselect').val(json[i].name);
7    });
8}

修正後

javascript
1
2$("#samplegazo .test").each(function(index, li) {
3    $(li).on('click', function() {
4        //ここにクリックした画像のデータ(codeとname)を取得する処理を書きたいです。
5        $(':hidden[name="hiddenCode"]').val(json[index].code);
6        $('#nameselect').val(json[index].name);
7    });
8});
9

ただし、 json のプロパティが 0,1,2,3 ・・・　のように 0 始まりで、かつ抜けている数字が
ないことが前提になります。

投稿2018/02/12 08:28

編集2018/02/12 10:07

jun68ykt

総合スコア9058

cofee

2018/02/13 01:59

回答や補足など、丁寧にご説明していただきありがとうございます。おかげさまで思い通りの動きが確認できました！とても勉強になりました。

jun68ykt

2018/02/13 02:49

解決されたようですね、よかったです！

cofee

2018/02/13 08:30

よろしければお答えいただきたいのですが、下記の箇所の処理速度を速めるのに他に書き方ありますでしょうか？ for内でconsole.log(json)とやると (2) [{…}, {…}] (2) [{…}, {…}] となっていてここが表示されるまで少し遅くなるのでどうにか改善できないかと思いまして、、、 //Ajaxで取得してきたデータがある場合 if(json !== null){ for(var i in json){ $('#samplegazo').append('<li><input type="image" width="140" height="100" class="test" data-dismiss="modal" src="/img/'+json[i].cate_cd +'/'+json[i].gazo_file +'"></li>'); $('#Modal').modal(); } } よろしくお願いいたします。

jun68ykt

2018/02/14 07:23

> 少し遅くなるのでどうにか改善できないかと思いまして、、、の件ですが、サンプルのJSON( 変数 jsonに入るデータ）と、そのJSのコード、および、その JSで <li> の追加される <ul> を含む HTML と必要あれば CSSも含めて、 jsFiddle に上げていただくことは可能でしょうか？ for ループの最適化なので、　実際に AJAX で API からデータを取ってきた体裁になっていなくてもかまいません。

cofee

2018/02/14 10:33

返信ありがとうございます。 https://jsfiddle.net/fg1g3aa8/2/#&togetherjs=trijnGt4lP 実際に全てのコードを書くわけにはいかなかったので for文の箇所を抜粋させていただきました。よろしくお願い致します。

jun68ykt

2018/02/15 06:41

jsFiddle に上げていただきましたコードを拝見しまして、動作確認できるように私のほうで適宜、コードを追加したものが以下です。 https://jsfiddle.net/jun68ykt/fg1g3aa8/30/ json の中に 1000 個要素を作って、 console.time と console.timeEnd でループの開始から終了までの時間を計ったところ、私のほうの環境ではだいたい 0.1 秒となっています。これをもとに早くすることを考えてみます。それと、もし各 <li><input> の画像サイズが大きいと、画像が描画されるのに時間はかかりますね。これは、ＪＳのプログラムを最適化するのとは、別問題で、画像を圧縮サービス使って小さくするとか、遅延ロードさせてみるとか、そういった画像レンダリングの最適化という課題になります。

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

js
1//Ajaxで取得してきたデータがある場合
2[].forEach.call(json, (v) => {
3    $('#samplegazo').append('<li><input type="image" width="140" height="100" class="test" data-dismiss="modal" src="/img/'+v.cate_cd +'/'+v.gazo_file +'"></li>');
4    $('#Modal').modal();
5});
6
7//モーダル内の画像クリック時の処理
8[].forEach.call(json, (v) => {
9  $('#samplegazo').on('click', '.test', (evt) => {
10    $(':hidden[name="hiddenCode"]').val(v.code);
11    $('#nameselect').val(v.name);
12  });
13});