flickr ユーザーの最新の 200 枚の写真から 4 枚のランダムな (そして異なる) 写真を表示したいと考えています。コードには 3 つの部分があります
- FlickrへのJsonリクエスト【作品】
- Javascript 乱数ジェネレーター [ほぼ動作]
- Jsonの解析[作品]
flickr から 200 枚の写真をリクエストしたところ、変数 myArray に保存する Json が返されました。この 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] に置き換えることで、このコードを機能させることができました。
2 番目の質問です。これは良いコードですか?私は特にパフォーマンス、スピードに興味があります。
<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>