実現したいこと
ajaxで複数ページの要素を取得して、一覧コンテンツを作成したいです。
作りたいイメージ
<ul class="item_list"> <li> <div class="img">**ここに１ページ目に取得してきた<img>タグ**</div> <div class="text">**ここに１ページ目に取得してきたテキスト**</div> </li> <li> <div class="img">**ここに2ページ目に取得してきた<img>タグ**</div> <div class="text">**ここに2ページ目に取得してきたテキスト**</div> </li> ...と、取得してきたページ数分表示させたい </ul>
発生している問題・エラーメッセージ
取得してきたページすべての要素が同じ箇所に入ってしまい、かつ取得してきたURL分生成されてしまいます。
また、[object Object]とも表示されてしまいます。
<ul class="item_list"> <li> <div class="img">[object Object]1ページ目の<img>タグ2ページ目の<img>タグ3ページ目の<img>タグ4ページ目の<img>タグ5ページ目の<img>タグ</div> <div class="text">[object Object]1ページ目のテキスト2ページ目のテキスト3ページ目のテキスト4ページ目のテキスト5ページ目のテキスト</div> </li> <li> <div class="img">[object Object]1ページ目の<img>タグ2ページ目の<img>タグ3ページ目の<img>タグ4ページ目の<img>タグ5ページ目の<img>タグ</div> <div class="text">[object Object]1ページ目のテキスト2ページ目のテキスト3ページ目のテキスト4ページ目のテキスト5ページ目のテキスト</div> </li> …これが取得してきたページ数分生成される </ul>
該当のソースコード
$(function(){ const list = "https://xxx/1.html,https://xxx/2.html,https://xxx/3.html,https://xxx/4.html,https://xxx/5.html"; const Data = list.split(','); for ( var i = 0; i < Data.length; i++ ) { var forCount = i; (function(i){ var target = Data[i]; $.ajax({ url: target, cache: false, datatype: 'html', }) .done(function(response) { var imgData = $(response).find('.img_cont'); var textData= $(response).find('.text_cont'); var insert = ''; insert += '<li>'; insert += ' <div class="img">' + $('.img').append(imgData) + '</div>'; insert += ' <div class="text>' + $('.text').append(textData) + '</div>'; insert += '</li>'; $('.item_list').append(insert); }) .fail(function(xhr) { }) .always(function(xhr, msg) { }); })(forCount); } });
※listについては別で取得したいページのURL一覧を記述しており、それを読み込んで配列にしています。
試したこと
ajax部分を正しく？ループさせる方法としてfinctionで括るという記事を見つけたので入れてみたのですが変わらず、
insert部分を１回ずつ対応させる方法を探してみたのです見つからずで
現状どこをどう変更すればいいのかが分からず質問させていただいた次第です。
ajax自体あまり使用したことがないため、探り探り記述しているためそもそもがおかしいなどのご指摘含め、
解決策があればご教授いただけますでしょうか。
追記：
取得先と掲載したいページのドメインは同一です。
また、URLのページ先から取得ではなくjsonやcsvでリストを作成して表示させようと思ったのですが
ファイルの格納先が別ドメインのため断念しました（.htaccessの設定がいじれない環境のため）
0 コメント