Construct the URL from JSON feed

Question

Could anyone please advise me of what am I doing wrong here?

I am trying to construct the image URL but using the flickr.photos.search method now (I need to display images close to geolocation of the visitor), I had it working before with groups_pool.gne and the JSON feed was different (simpler) formatted but now..

The URL is working, I get the array with all the data I need (farm, server, secret and id) but can't construct the url for the photo.

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_\
key=KEY&format=json&privacy_filter=0&media=photos&has_geo=1&accuracy=13&sort=int\
erestingness-desc&content_type=1&per_page=32&extras=geo,owner_name&page=1&radius\
_units=km&radius=1.521739&lat=40.952532&lon=-4.1326349999999366&text=Alcazar&jso\
ncallback=jsonp1320163051486", getJSONimages);

function getJSONimages(data) {
  var htmlString = "";

  $.each(data.photos.photo, function(i,item){
    htmlString += '<img src="http://farm'+ item.farm +'.static.flickr.com/'+
      item.server +'/'+ item.id +'_'+ item.secret +'_m.jpg" />';
  });

  $('#slideshow').html(htmlString);

Thank you.

---

I have added the url_m in the extras, in the URL to get the JSON feed and I get the full URL in my feed and that should help as I do not have to concatenate the rest but still doesn't work.

I can't get it to work, and it's extremely frustrating as I know is very simple. Well, not for me obviously.

This is my function, after I get the url_m in the loop:

function getJSONimages(data) {
var htmlString = "";
$.each(data.photos.photo, function(i,item){
// var url = (item.url_m).replace("\", "");
htmlString += '<img src="' + item.url_m + '" />';
});
$('#slideshow').html(htmlString);
}

Even if I use the "url" variable or no, same result.

However, I have noticed something.

In the feed using groups_pool.gne, where I am able to pull the photos successfully, I go to the media.m like that:

$.each(data.items, function(i,item){
var biggestSize = (item.media.m).replace("_m.jpg", ".jpg");
htmlString += '<img src="' + biggestSize + '" />';

Notice that I have items, then media, then m with it's own value! Is actually items.[media: {m:PHOTOURL}].

Where as in this other JSON feed using the flickr.photos.search method, I have the following "object path": jsonFlickrApi.photos.photo[{url_m:PHOTOURL}]

And try to use this loop:

$.each(data.photos.photo, function(i,item){
htmlString += '<img src="' + item.url_m + '" />';

I think this is my problem but I don't have any ideas how to approach it. It's obvious there is a different structure between the two feeds:

items.[media: {m:PHOTOURL}] photos.photo[{url_m:PHOTOURL}]

I am going to research more on jQuery loops. Any ideas?

Answer 1

Weirdly these docs don't mention getting the farm. Can you console.log your item in the $.each loop and see what you get? http://www.flickr.com/services/api/flickr.photos.search.html

It's clearly the right URL format though assuming you get all of those pieces: http://www.flickr.com/services/api/misc.urls.html

EDIT Can you tell me what this says (in the alert box):

$.each(data.photos.photo, function(i,item){
  var url = 'http://farm'+ item.farm +'.static.flickr.com/' + item.server +'/'+ item.id +'_'+ item.secret +'_m.jpg';
  alert(url);
});

Answer 2

A URL is not a JSON object so you cannot parse it. You're trying get the URL parameters. Include the following function and use it like this.

lat = querySt('lat');
lon = querySt('lon');


function querySt(ji) {

    hu = window.location.search.substring(1);

    gy = hu.split("&");

        for (i=0;i<gy.length;i++) {

            ft = gy[i].split("=");

            if (ft[0] == ji) {

            return ft[1];

        }

    }

}

You might want to modify this part

hu =window.location.search.substring(1);

to

hu = yourURLVariable;

if you're getting the URL from somewhere else.