使用来自 Flickr 的 JSON 输出来显示来自搜索的图像
Use JSON output from Flickr to display images from search
我需要根据 JSON 请求在我的网站上显示图像。
我有 JSON:
而且我有将照片 URL 放入以下格式所需的格式:
https://www.flickr.com/services/api/misc.urls.html
但我不知道如何遍历它,我发现了一些类似的例子,但我仍然无法看到我需要的东西。
我正在使用 JavaScript/jQuery 来提取信息。
我想我会循环使用它。
CurrentPhotoUrl = 'https://farm'+CurrentPhotoFarm+'.staticflickr.com/'+CurrentPhotoServer+'/'+CurrentPhotoId+'_'+CurrentPhotoSecret+'_n.jpg'
但是每个变量都需要用元素中的值填充。我需要遍历 JSON.
中的所有 5 个元素
如能提供有关如何创建此循环的任何帮助,我们将不胜感激。
试试这个代码
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
此答案假设您的 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);
}
});
我不确定这是否是最好的解决方案,但这是有人建议的并且有效。
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 的解决方案也适用于我。我不知道哪个更好,但我想我也会 post 这个,因为看起来他们的做法完全不同。
我需要根据 JSON 请求在我的网站上显示图像。
我有 JSON:
而且我有将照片 URL 放入以下格式所需的格式: https://www.flickr.com/services/api/misc.urls.html
但我不知道如何遍历它,我发现了一些类似的例子,但我仍然无法看到我需要的东西。
我正在使用 JavaScript/jQuery 来提取信息。
我想我会循环使用它。
CurrentPhotoUrl = 'https://farm'+CurrentPhotoFarm+'.staticflickr.com/'+CurrentPhotoServer+'/'+CurrentPhotoId+'_'+CurrentPhotoSecret+'_n.jpg'
但是每个变量都需要用元素中的值填充。我需要遍历 JSON.
中的所有 5 个元素如能提供有关如何创建此循环的任何帮助,我们将不胜感激。
试试这个代码
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
此答案假设您的 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);
}
});
我不确定这是否是最好的解决方案,但这是有人建议的并且有效。
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 的解决方案也适用于我。我不知道哪个更好,但我想我也会 post 这个,因为看起来他们的做法完全不同。