Flickr API 一次显示所有相册名称

Question

所以我之前问过类似的问题，但没有得到任何回应。经过一个小时的麻烦，我采用了另一种方法。但我再次面临同样的问题。我成功获取了所有相册名称和所有照片。但问题是所有的相册名称都是一次显示，然后是所有的照片。我想显示相册名称及其对应的照片，然后是另一个相册。我不知道我做错了什么。请帮忙

<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>

JSON 第一个 API 调用的响应

{"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_comments":"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"}

JSON 第二个 API 调用的响应

{“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": “好的”}

Answer 1

如果我没理解错的话，你想显示相册标题，然后显示该相册中的图像。对吗？

那么您需要在同一个包装元素中连续附加 title/images，而不是在两个不同的元素中。

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>

Flickr API 一次显示所有相册名称

Flickr API displaying all album names at once

html

jquery

flickr