前提
JQueryでメトロポリタン美術館のAPIにajax通信をしています。その時に受け取るデータは
JavaScript内のどこかで保存されているのでしょうか?プラウザのデバックモードで
ローカルストレージやキャッシュを見ても保存されていません。
発生している疑問
①tag_buttonの中の値でAPIにリクエストをして、作品のIDの配列を貰います。
その後に10件ずつ表示したいので、フィルターにかけて10件に絞り
②新たにAPIにサムネイル画像をリクエストして表示させています。
(元のプログラムではもっと見るボタンを押すことで再度10リクエストします。)
プログラム自体は動くのですが、①番目のAPIリクエストのレスポンスされたdataが
どこに保持されているのかが疑問点です。
該当のソースコード
JavaScript
1$(document).on('click','#tag_button', function () { 2 let tagVal = $(this).val(); 3 function ObjIdAjax(tagVal){ 4 return $.ajax({ 5 url: 'https://collectionapi.metmuseum.org/public/collection/v1/search', 6 type:'GET', 7 dataType: 'json' 8 timeout:20000, 9 data:{ 10 'q': tagVal 11 } 12 }).then(function(data) { 13 let thumbnailList = data; 14 let transTitleThum; 15 16 //(今表示されている画像の次<10件)の範囲のサムネイル配列をretrunしている 17 let filteredObjIDs = thumbnailList.filter(function(element, index, array) { 18 let newCount =currentThumCnt + addThumCnt; // 新しくサムネイルを表示する件数 19 if(currentThumCnt == 0){ 20 return (index < defaultThumCnt); 21 } 22 return (currentThumCnt <= index && index < newCount); 23 }); 24 25 $(filteredObjIDs).each(function (j, objIdData) { 26 ThumListAjax(objIdData).done(function(objDataJson){ 27 googleApiAjax(objDataJson.title).then(function(transTitle){ 28 transTitleThum = transTitle['data']['translations'][0]['translatedText']; 29 },function(){ 30 transTitleThum = objDataJson['title']; 31 }).always(function(){ 32 $('#thumbnail_list').append('<li id="thumbnailArt" class="thumbnail-art" value="' + objDataJson['objectID'] 33 + '"data-count="'+j+'"><img src="'+ objDataJson['primaryImageSmall'] + '"id="thumbnail_images" class="thumbnail-images" alt="画像"><p>' 34 +'「'+transTitleThum +'」'+'</p></li>'); 35 }); 36 maxThumCnt++; 37 }); 38 }); 39 }); 40 }; 41});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/27 06:12 編集
2019/09/27 06:16