使用Flickr的JSON输出来显示搜索图像

Question

我需要通过JSON请求在我的网站上显示图像。

我有JSON：

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=6a970fbb976a06193676f88ef2722cc8&text=sampletext&sort=relevance&privacy_filter=1&safe_search=1&per_page=5&page=1&format=json&nojsoncallback=1

而且我有将照片网址放入以下格式： https : //www.flickr.com/services/api/misc.urls.html

但是我不知道该如何遍历，我发现了一些类似的例子，但是我仍然很难看到我需要的东西。

我正在使用JavaScript / jQuery提取信息。

我想我会循环使用。

CurrentPhotoUrl = 'https://farm'+CurrentPhotoFarm+'.staticflickr.com/'+CurrentPhotoServer+'/'+CurrentPhotoId+'_'+CurrentPhotoSecret+'_n.jpg'

但是，这些变量中的每一个都需要用元素中的值填充。 我将需要遍历JSON中的所有5个元素。

任何有关如何创建此循环的帮助将不胜感激。

Answer 1

试试这个代码

var n = JSON.parse(x)  //x is the json returned from the url.
var _s = n.photos.photo;
for(var z = 0 ; z < n.photos.photo.length ; z++)
{
   var CurrentPhotoUrl = 'https://farm'+_s[z]['farm']+'.staticflickr.com/'+_s[z]['server']+'/'+_s[z]['id']+'_'+_s[z]['secret']+'_n.jpg'
   console.log(CurrentPhotoUrl);  
} 

编辑（使用实际的JQUERY AJAX调用）

    var n ='';
 $.ajax({url: "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=6a970fbb976a06193676f88ef2722cc8&text=sampletext&sort=relevance&privacy_filter=1&safe_search=1&per_page=5&page=1&format=json&nojsoncallback=1", success: function(result){

        console.log(result);
        n = result;
        var _s = n.photos.photo;
        for(var z = 0 ; z < n.photos.photo.length ; z++)
        {
           var CurrentPhotoUrl = 'https://farm'+_s[z]['farm']+'.staticflickr.com/'+_s[z]['server']+'/'+_s[z]['id']+'_'+_s[z]['secret']+'_n.jpg'
           console.log(CurrentPhotoUrl);  
        }  


    }});

输出：

https://farm8.staticflickr.com/7198/6847644027_ed69abc879_n.jpg https://farm3.staticflickr.com/2517/3905485164_84cb437a29_n.jpg https://farm1.staticflickr.com/292/32625991395_58d1f16cea_n.jpg https：// farm9 .staticflickr.com / 8181 / 7909857670_a64e1dd2b2_n.jpg https://farm9.staticflickr.com/8143/7682898986_ec78701508_n.jpg

Answer 2

这个答案假设您的json数据不会改变。 因此，在.js文件中，将json设置为变量。

var json = <paste json here>;
// the photos are inside an array, so use forEach to iterate through them
json.photos.photo.forEach((photoObj) => {
    // the photo will render via an img dom node
    var img = document.createElement('img');
    var farmId = photoObj.farm;
    // you can fill out the rest of the variables ${} in the url
    // using the farm-id as an example
    img.src = `https://farm${farmId}.staticflickr.com/${serverId}/${id}_${secret}.jpg`
    // add the image to the dom
    document.body.appendChild(img);
}

在包含基本html模板的html文件中，通过脚本标签加载此javascript文件，或将其粘贴到脚本标签中。

如果您想从网页中获取 json并假设您已加载了jquery脚本...

$.ajax({
        type: 'GET',
        url: <flicker_url_for_json>,
        success: (response) => {
            // iterate through json here
        },
        error: (error) => {
            console.log(error);
        }
    });

Answer 3

我不确定这是否是最好的解决方案，但是有人建议使用它并且可以正常工作。

const requestURL = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=6a970fbb976a06193676f88ef2722cc8&text=sampletext&sort=relevance&privacy_filter=1&safe_search=1&per_page=5&page=1&format=json&nojsoncallback=1'

$.ajax(requestURL)
  .done(function (data) {
    data.photos.photo.forEach(function (currentPhoto) {

      console.log('https://farm'+currentPhoto.farm+'.staticflickr.com/'+currentPhoto.server+'/'+currentPhoto.id+'_'+currentPhoto.secret+'_n.jpg')

    })
  })

Varun的解决方案也对我有用。 我不知道哪个更好，但我想我也应该发布此帖子，因为看起来它们做得完全不同。