I'm trying to use a getJSON result obtained in a function in another function, but I don't know how to do it, anyone can help me?
I need to get text from an input and look in flickr for related images, later, I have to use that JSON call to take those pictures and show them in my page. This is what I have already done:
dataservices.pictureFeedService = function() {
function searchForPictures(searchFilterEntry, callback) {
var query = "http://www.flickr.com/services/feeds/photos_public.gne?tags=" + searchFilterEntry + "&format=json&jsoncallback=?";
$.getJSON(query,callback);
}
return {
searchForPictures: searchForPictures
};
}();
This is the second function, I want to use data obtained in previous JSON:
dataservices.picturesLayoutService = function() {
function buildPicturesLayout(divImageContainer) {
$.getJSON(function(data) {
//read images url
// Pop our HTML in the #images DIV
$("#" + divImageContainer).html(htmlString);
});
}
return {
buildPicturesLayout: buildPicturesLayout
};
}();
I call function this way:
dataservices.pictureFeedService.searchForPictures(searchTags, dataservices.picturesLayoutService.buildPicturesLayout("images"));
Try something like
dataservices.picturesLayoutService = function () {
function buildPicturesLayout(divImageContainer, data) {
$("#" + divImageContainer).empty();
//iterate through the items and create a list
$.each(data.items, function (i, item) {
$("#" + divImageContainer).append('<img src="' + item.media.m + '" />');
})
}
return {
buildPicturesLayout: buildPicturesLayout
};
}();
//write a callback function which will receive the ajax response and pass it to the buildPicturesLayout method
dataservices.pictureFeedService.searchForPictures(searchTags, function (data) {
dataservices.picturesLayoutService.buildPicturesLayout("images", data)
});