- var endPoint = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4ef2fe2affcdd6e13218f5ddd0e2500d&tags=" + searchField + "%2C+&per_page=" + perPage + "&page=" + currentPage + "&format=json&nojsoncallback=1";
Data Service to Call Flicker Photo Search API -
- var app = angular.module("flickerApp");
-
- app.factory('flickerDataService', ['$http', '$q', function ($http, $q) {
-
- function getSearchData(searchField, perPage, currentPage) {
- var endPoint = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4ef2fe2affcdd6e13218f5ddd0e2500d&tags=" + searchField + "%2C+&per_page=" + perPage + "&page=" + currentPage + "&format=json&nojsoncallback=1";
- var req = {
- method: 'GET',
- url: endPoint
- }
-
- var deferred = $q.defer();
- $http(req).success(function (data) {
- deferred.resolve(data);
- })
- .error(function (err) {
- console.log('Error retrieving data');
- deferred.reject(err);
- });
- return deferred.promise;
- }
-
- return {
- getSearchData: getSearchData
- };
- }]);
Then, you will get Flicker API JSON response, as shown below.
- { "photos": { "page": 1, "pages": "34477", "perpage": 15, "total": "517154",
- "photo": [
- { "id": "29391554603", "owner": "11741544@N05", "secret": "548817b7f5", "server": "5161", "farm": 6, "title": "1933 Rolls Royce", "ispublic": 1, "isfriend": 0, "isfamily": 0 },
- { "id": "29391552033", "owner": "11741544@N05", "secret": "4381911dea", "server": "5643", "farm": 6, "title": "1933 Rolls Royce", "ispublic": 1, "isfriend": 0, "isfamily": 0 }
- ] }, "stat": "ok" }
Now, create URL of each image by using above JSON properties.
- controller.getFlickerData = function () {
- controller.isLoading = true;
- flickerDataService.getSearchData(controller.searchValue, controller.perPage, controller.currentIndex).then(function (data) {
- controller.flickerData = data.photos.photo;
- controller.createImageUrl(controller.flickerData);
- controller.isLoading = false;
- }).catch(function (data) {
- controller.errorMessage = "Oops! Something went wrong.";
- controller.isLoading = false;
- });
- }
- controller.createImageUrl = function (flickerData) {
- controller.urlData = [];
- var url = "";
- if (!angular.isUndefined(flickerData) && flickerData.length > 0) {
- controller.mainImageUrl = "https://farm" + flickerData[0].farm + ".staticflickr.com/" + flickerData[0].server + "/" + flickerData[0].id + "_" + flickerData[0].secret + ".jpg";
-
- for (var i = 0; i < flickerData.length; i++) {
- url = "https://farm" + flickerData[i].farm + ".staticflickr.com/" + flickerData[i].server + "/" + flickerData[i].id + "_" + flickerData[i].secret + ".jpg";
- controller.urlData.push({ id: i, url: url });
- }
- }
- }
In the above code, this line will create image URL -
- controller.mainImageUrl = "https://farm" + flickerData[0].farm + ".staticflickr.com/" + flickerData[0].server + "/" + flickerData[0].id + "_" + flickerData[0].secret + ".jpg";
Now, bind the image URL, like below, to display on HTML page.
- <ul>
- <li ng-repeat="item in homeController.urlData" ng-click="homeController.GetImage(item.id)" style="cursor: pointer;">
- <img src="{{item.url}}" class="js-gallery__image" />
- </li>
- </ul>
For more details, I have attached zipped project. Download it and follow the below steps for the execution of project.
- Node.js should be installed and integrated into command prompt. Downloading source.
- Navigate to folder "FlickerApp".
- Here, you will find startServer.bat file.
- Click on this file. It will execute the Server.
- Go to browser and type "localhost:8080".
- The web app will open.
Conclusion - By using flicker search API, you can get images from different locations and create image URL to show.