Flickr API 一次显示所有专辑名称答案

【问题标题】：Flickr API displaying all album names at onceFlickr API 一次显示所有专辑名称
【发布时间】：2021-06-20 15:49:09
【问题描述】：

所以我之前问过一个类似的问题，但没有得到回应。经过一个小时的麻烦，我提出了另一种方法。但我又面临同样的问题。我成功获取了所有专辑名称和所有照片。但问题是所有专辑名称都同时显示，然后是所有照片。我想显示像专辑名称和相应的照片，然后是另一个专辑。我不知道我做错了什么。请帮忙。

<html>
<body height="400" width="345">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=193275648%40N03&format=json&nojsoncallback=1",
  "method": "GET",                                               } 
$.ajax(settings).done(function (data) {
  console.log(data);
// $("#galleryTitle").append(data.photos.photo[0].title + " Gallery");
$.each( data.photosets.photoset, function( i, gp ) {
$("#albumname").append(data.photosets.photoset[i].title._content + " Gallery");
 var id = gp.id; 
 var settings1 = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id="+ id +"&user_id=193275648%40N03&format=json&nojsoncallback=1",
  "method": "GET",                                               } 
$.ajax(settings1).done(function (data) {
  console.log(data);
$.each( data.photoset.photo, function( i, gpr ) {
var farmId = gpr.farm;
var serverId = gpr.server; 
var id = gpr.id; 
var secret = gpr.secret;
console.log(farmId + ", " + serverId + ", " + id + ", " + secret);
//  https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
$("#flickr").append('<center><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/><br><br></center>');
});
}); 
 });
 }); 
 </script>
<!-- <h2><div id="galleryTitle"></div></h2> -->
<h2><div id="albumname"></div></h2>
<div id="flickr"/>
</body>
</html> 
<style>
img{
width: auto;
height: 80%;
max-width: 100%;

overflow: hidden;
 border-width: 1px;
    border-color: Black;
padding: 5px;
}
</style>

第一次 API 调用的 JSON 响应

{"photosets":{"page":1,"pages":1,"perpage":500,"total":1,"photoset":[{"id":"72157719443542617","owner" :"193275648@N03","username":"kasindimahesh","primary":"51258562023","secret":"dba1214e96","server":"65535","farm":66,"count_views":" 0","count_cmets":"0","count_photos":2,"count_videos":0,"title":{"_content":"fff"},"description":{"_content":""}, "can_comment":0,"date_create":"1624162691","date_update":"1624172423","photos":2,"videos":0,"visibility_can_see_set":1,"needs_interstitial":0}]}," stat":"ok"}

第二次 API 调用的 JSON 响应

{"photoset":{"id":"72157719443542617","primary":"51258562023","owner":"193275648@N03","ownername":"kasindimahesh","photo":[{" id":"51258562023","secret":"dba1214e96","server":"65535","farm":66,"title":"WhatsApp Image 2021-06-07 at 17.15.56","isprimary" :"1","ispublic":1,"isfriend":0,"isfamily":0},{"id":"51259309294","secret":"c2f246caf7","server":"65535"," farm":66,"title":"WhatsApp Image 2021-06-05 at 16.34.10","isprimary":"0","ispublic":1,"isfriend":0,"isfamily":0}] ,"page":1,"per_page":500,"perpage":500,"pages":1,"title":"fff","total":2},"stat":"ok"}

【问题讨论】：

标签： html jquery flickr

【解决方案1】：

如果我理解正确，您希望显示专辑标题，然后显示该专辑中的图像。对吧？

然后您需要将标题/图像连续附加到同一个包装元素中，而不是两个不同的元素中。

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=d4484e060a112d188a27a51ea64f427e&user_id=193275648%40N03&format=json&nojsoncallback=1",
  "method": "GET",
}
const flickr = $("#flickr");  // the wrapping div, where all albums divs will be appended
$.ajax(settings).done(function(data) {
  $.each(data.photosets.photoset, function(i, gp) {
    const div = $("<div/>");  // a div for each album
    flickr.append(div);
    const albumname = $("<h2/>");  // headline for the album
    albumname.text(gp.title._content + " Gallery");
    div.append(albumname);
    var id = gp.id;
    var settings1 = {
      "async": true,
      "crossDomain": true,
      "url": "https://www.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=d4484e060a112d188a27a51ea64f427e&photoset_id=" + id + "&user_id=193275648%40N03&format=json&nojsoncallback=1",
      "method": "GET",
    }
    $.ajax(settings1).done(function(data) {
      $.each(data.photoset.photo, function(i, gpr) {
        var farmId = gpr.farm;
        var serverId = gpr.server;
        var id = gpr.id;
        var secret = gpr.secret;
        div.append('<center><img style="border:1px solid #000000"  src="https://farm' + farmId + '.staticflickr.com/' + serverId + '/' + id + '_' + secret + '.jpg"/><br><br></center>');  // append images to album div
      });
    });
  });
});

img {
  width: auto;
  height: 80%;
  max-width: 100%;
  overflow: hidden;
  border-width: 1px;
  border-color: Black;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="flickr"></div>

【讨论】：

非常感谢您的回答。我试过运行你的代码，但我得到的只是一个空白页。你能看看吗
嗯...堆栈 sn-p 和 this jsfiddle 工作正常。我看到两个标题和三个图像。控制台中是否出现任何错误？
没关系。它就像一个魅力。非常感谢您的时间和解决方案。自过去两天以来，我一直在为此苦苦挣扎，而您就像救世主一样。非常感谢。