我想显示 flickr 用户最近 200 张照片中的 4 张随机(和不同)照片。代码有 3 个部分
- 对 Flickr 的 Json 请求 [作品]
- Javascript 随机数生成器 [几乎可以工作]
- Json的解析[作品]
我从 flickr 请求了 200 张图片,我得到了一个 Json 返回,我将它保存在一个变量 myArray 中。我在这个 var 上运行一个生成随机数(0-200)的函数。使用 splice,我将与随机数对应的项目保存在新变量 selArray 中。这也会从 myArray 中删除该项目,防止它再次被随机选择。这个函数运行 x 次,x 是你想要的随机数的数量。这个功能并没有完全做到我想要它做的事情。代码的最后一部分解析 Json。当我在 myArray 上使用它时,最后一部分本身可以工作,但不能在 selArray 上工作。
这就是问题。函数 getRandoms 完成后,selArray 包含 4 个数组,每个数组都保存一个对象,而不是简单地保存 4 个对象。这是控制台显示的内容:
0 [Object { id="...}]
但我想要这个:(这是 myArray 显示的)
0 Object { id="...}
所以,这是我的问题:我该如何解决这个问题?我究竟做错了什么?备注:我能够通过在代码的 $.each 部分中将 item 替换为 item[0] 来使此代码工作。
第二个问题。这是好代码吗?我对性能和速度特别感兴趣。
<script>
$(document).ready(function(){
var apikey = '[set api here]';
var userid = '[set id here]';
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key='+apikey+'&user_id='+userid+'&per_page=200&format=json&jsoncallback=?',
function(data){
// flickr request ok
if(data.stat == 'ok'){
var myArray = data.photos.photo;
var selArray = new Array;
function getRandoms(number){
for(var i=0; i < number; i++){
var randomNumber = Math.floor(Math.random()*myArray.length);
selArray.push(myArray.splice(randomNumber,1));
}
}
// get random numbers
getRandoms(4);
//look at selArray in console
console.dir(selArray);
//parse json, this works
$.each(selArray, function(i,item){
var purl = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg';
var container = '<a target="_blank" href="http://www.flickr.com/photos/'+userid+'/'+item.id+'/"><img class="span4" alt="'+item.title+'" src="' + purl + '"/>';
$(container).appendTo('#images');
});
// flickr request problem
}else{
console.log(" The request to get the array was not good ");
}
});
});
</script>