data.Items.forEach(function(item)})で書いている部分を$.each(配列, function functionName() {})を使う方法で書きたい。

Question

###前提・実現したいこと
data.Items.forEach(function(item)})で書いている部分を$.each(配列, function functionName() {})を使って書く方法を知りたいです。

該当のソースコード

        data.Items.forEach(function(item) {//この部分で$.each(配列, function functionName() {})を使って書きたい。
          var template = '<li class="lists__item">' +
                            '<div class="lists__item__inner">' +
                              '<a href="'+ item.Item.itemUrl +'"class="lists__item__link" target="_blank">' +
                                '<img src="'+ item.Item.mediumImageUrl +'" class="lists__item__img" alt="'+ item.Item.title +'">' +
                                  '<p class="lists__item__detail">作品名：'+ item.Item.title +'</p>' +
                                  '<p class="lists__item__detail">作者：'+ item.Item.author +'</p>' +
                                  '<p class="lists__item__detail">出版社：'+ item.Item.publisherName +'</p>' +
                              '</a>' +
                            '</div>' +
                          '</li>';
       　$('.lists').append(template);
        })

試したこと

$.each(data.Items,function(item) {
          var template = '<li class="lists__item">' +
                            '<div class="lists__item__inner">' +
                              '<a href="'+ item.Item.itemUrl +'"class="lists__item__link" target="_blank">' +
                                '<img src="'+ item.Item.mediumImageUrl +'" class="lists__item__img" alt="'+ item.Item.title +'">' +
                                  '<p class="lists__item__detail">作品名：'+ item.Item.title +'</p>' +
                                  '<p class="lists__item__detail">作者：'+ item.Item.author +'</p>' +
                                  '<p class="lists__item__detail">出版社：'+ item.Item.publisherName +'</p>' +
                              '</a>' +
                            '</div>' +
                          '</li>';
          $('.lists').append(template);
        })

という風に書いてみましたがうまく表示されませんでした。

Comments

[maisumakun]

なぜそう書き換えたいのですか？

[ttbdz]

jQueryについて勉強中で.eachを使う書き方についてもっと理解を深めたいからです。

[maisumakun]

> うまく表示されませんでした。

具体的に、どうなるのですか？「エラーが表示される」「崩れて表示される」「何も起きない」など、「うまくいかない」でも挙動は何通りか考えられます。

[ttbdz]

Uncaught TypeError: Cannot read property 'itemUrl' of undefinedというエラーが表示されて検索機能が動かなくなってしまいます。

Answer 1

jQuery.each の callback の引数は index, value のようなので、以下のようにしてみたらいかがでしょうか。

$.each(data.Items, function(index, item) {
    ...
}

参考) https://api.jquery.com/jquery.each/

Comments

[ttbdz]

試してみたらうまくいきました。
ありがとうございます。

Answer 2

$.eachは、コールバックの第2引数（あるいはthis）で値を受けます。第1引数には、順番が来ます（jQuery公式）。

// 「受け取るけど使わない引数」は、慣習的にアンダーバーで始めることが多い
$.each(data.Items,function(_index, item) {
  // 後略

Comments

[ttbdz]

なるほど、ありがとうございます。

[maisumakun]

なお、今回の配列のように、「.forEachで回せる」とわかっているものに対して$.eachを使うのは、ほとんどメリットがありません。

[ttbdz]

そうなんですね。
勉強になりました。
ありがとうございます。