jquery small refactoring , json call

Question

Hi everybody,

I need you suggestion to make some refactoring in jquery code because now it looks terrible for me. I have 4 json calls but the difference it is just the URL call.

EX:

        var userId = MyuserID;
        var perPage = '45';
        var showOnPage = '45';

        var tag =  'tag1';
        var tag1 = 'tag2';
        var tag2 = 'tagn';


        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo("#flickr ul");
            });
            $("#flickr a").fancybox();
        });


        $.getJSON('http://api.flickr.com/services/rest/?format=json&amp;method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tag1 + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(".SetPinos1 ul");
            });
            $(".Sets a").fancybox();
        });


        $.getJSON('http://api.flickr.com/services/rest/?format=json&amp;method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tagn + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(".SetPinos ul");
            });
            $(".Sets a").fancybox();
        });

var tag is only one difference in this url :

Can somebody help me not to repeat all this stuff ??

Sorry by so long garbage :(

Answer 1

function getSomeJson(url) {
        $.getJSON(url,
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(".SetPinos ul");
            });
            $(".Sets a").fancybox();
        });
    }

and just call it three times, passing each URL string as url argument.

As a side-note, I would like to point out that browsers have a limit on the number of concurrent XHR requests. Take a look here:

http://stackoverflow.com/questions/561046/how-many-concurrent-ajax-xmlhttprequest-requests-are-allowed-in-popular-browser

If it is the case that your application is exceeding the somewhat subjective 'recommended' number of concurrent requests, you might want to consider rigging your application such that the next request happens from within the success callback. That will guarantee that the request will not be sent until the previous one has completed.

Answer 2

It looks like both the URL the callback (specifically the selectors) are different . So:

function startFlickrCall(tag, appendLoc, fancyBox)
{
        var userId = MyuserID;
        var perPage = '45';
        var showOnPage = '45';

        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
                  '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;';
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(appendLoc);
            });
            $(fancybox).fancybox();
        });
}

startFlickrCall('tag1', "#flickr ul", "#flickr a");
startFlickrCall('tag2', ".SetPinos1 ul", ".Sets a"));
startFlickrCall('tagn', ".SetPinos ul", ".Sets a"));