楽天ブックのAPIの反映
解決したいこと
楽天ブックスのAPIの記述において、クリック処理と、データ取得、HTML生成、表示処理など分離させることでメンテナンス性を上げる為、結果取得後のif(data.count > 0) {内を関数化するようしようとしたのですが、反映されなくなってしまいました。
関数に変更し、呼び出すだけでは反映されないのか、教えていただきたいです。
初心者な質問ですみません。
よろしくお願いいたします。
この方のコードを使用させていただいています。
https://qiita.com/takuyahori/items/8b80bf0c28da37bd1112
発生している問題・エラー
エラーはありません
該当する元のソースコード
}).done(function(data) {
if(data.count > 0) {
$(".comment").remove();
let list = "";
for (let i=0; i<data.Items.length; i++) {
list += '<li class=lists__item>' +
'<div class=lists__item__inner>' +
'<a href=${data.Items[i].Item.itemUrl} class=lists__item__link target=_blank>' +
'<img src=${data.Items[i].Item.largeImageUrl} class=lists__item__img alt>' +
'<p class=lists__item__detail>作品名: ${data.Items[i].Item.title}</p>' +
'<P class=lists__item__detail>作者 : ${data.Items[i].Item.author}</p>' +
'<p class=lists__item__detail>出版社: ${data.Items[i].Item.publisherName}</p>' + '</a>' + '</div>' + '/li>';
};
$(".lists").prepend(list);
} else {
$(".commit").remove();
$(",lists").before("<div class='commit'</div>");
$(".comment").html("<p class='message'>検索結果が見つかりませんでした。<br>別のキーワードで検索してください。 </p>");
};
});
自分で試したコード
function HtmlItem (item) {
let list = “”;
for (let i = 0; i < data.Items.length; i++){
list += `<li class=lists__item>` +
`<div class=lists__item__inner>` +
`<a href=${data.Items[i].Item.ItemUrl} class=lists__item__link target=_blank>` +
`<img src=${data.Items[i].Item.largeImageUrl} class=lists__item__img alt>` +
`<p class=lists__item__detail>作品名： ${data.Items[i].Item.title}</p>` +
`<p class=lists__item__detail>作者： ${data.Items[i].Item.author}</p>` +
`<p class=lists__item__detail>出版社： ${data.Items[i].Item.publisherName}</p>` +
`</a>` +
`</div>` + `</li>`;
};
let HtmlItem = HtmlItem (item);
})
.done(function (data) {
if(data.count > 0) {
$(“.comment”).remove();
HtmlItem (item);
$lists.prepend(list);
console.log(data);
} else {
$(“.comment”).remove();
$lists.before(“<div class=‘comment’></div>“);
$(“.comment”).html(“<p class=‘message’>検索結果が見つかりませんでした。<br>別のワードを検索してください。</p>“);
console.log(“い”);
};
});
0 likes
