While trying to build a simple 10 image gallery of images pulled from flickr API for school i have run into a problem.
My Code...
$(document).ready(function() {
$.get('http://api.flickr.com/services/rest/?&method=flickr.photos.search&tags=thor&api_key=[API_KEY]5&per_page=10', function(data) {
var items = [];
$(data).find("photo").each(function(index, value) {
var ident = (value.id);
var secret_id = (value.secret);
var farm_id = (value.farm);
var server_id = (value.server);
$("#target").append("<p>" + ident + " " + server_id + " " + secret_id + " " + farm_id + "</p>");
});
});
});
The Output...
"10627683824 undefined undefined undefined" (10 of these with different id values)
I know I am on the right track. If someone can explain to me WHY i am getting the undefined values it would be greatly appreciated.
You need to use attr
to get the attributes from the returned XML. Try this:
$.get('http://api.flickr.com/services/rest/?&method=flickr.photos.search&tags=thor&api_key=[API_KEY]&per_page=10', function (data) {
var items = [];
$(data).find("photo").each(function (index, value) {
var ident = value.id;
var secret_id = $(value).attr('secret');
var farm_id = $(value).attr('farm');
var server_id = $(value).attr('server');
$("#target").append("<p>" + ident + " " + server_id + " " + secret_id + " " + farm_id + "</p>");
});
});
The only reason it works for value.id
is because id
is a native property.