Advanced Getty API Try it Out

by Mark Pitman

HTML

<script src="http://developers.gettyimages.com/js/angular.min.js"></script>
<div ng-app="api">
<div ng-controller="SearchController as search" class="search">
  <h3>Parameters</h3>
  <div class="form border-bottom">
    <form class="border-bottom" ng-submit="send()">
      <div>
        <label class="select-label" ng-repeat="resource in resources">
          <input type="radio" name="resource" ng-value="resource.path" ng-model="selected_resource.path" /> {{ resource.name }}
        </label>
      </div>
      <section class="slice group">
        <div class="col length-2-of-4">
          <div class="form-group">
            <label class="label-block" for="phrase">Phrase</label>
            <input type="text" ng-model="request.phrase" />
          </div>

          <div class="form-group">
            <label class="label-block" for="Sort-order" ng-show="request.sort_order">Sort-order</label>
            <select ng-model="request.sort_order" ng-options="sort for sort in sort_orders" ng-show="request.sort_order"></select>
            <input class="btn btn-default" type="submit" value="Search" />
          </div>
        </div>
        <div class="col length-2-of-4"></div>
      </section>
    </form>
    <span us-spinner="{radius:10, width:4, length: 10}" spinner-key="spinner-1" style="position: relative; top: 50%; left: 50%"></span>
    <div class="request border-bottom">
      <h3>Request</h3>
      <pre>{{ apirequest() }}</pre>
    </div>
    <section class="slice group">
      <div class="col length-2-of-4">
        <h3>Response</h3>
        <!--  <span class="status"> Status: {{ responsecode }}</span>  -->
        <div class="response">
          <pre ng-hide="isLoading">{{ apiresponse | json }}</pre>
        </div>
      </div>
      <div class="col length-2-of-4">
        <h3>Formatted Response</h3>
        <div class="formatted-response response">
          <div ng-repeat="image in apiresponse.images" ng-hide="isLoading" class="images">
            <div...

JavaScript

var app = angular.module('api', []);

  app.controller('SearchController', ['$http', '$scope', function($http, $scope) {
    $scope.api_uri = 'https://api.gettyimages.com/v3';
    $scope.request = {
      phrase: 'puppies',
      fields: 'id,title,thumb,referral_destinations',
      sort_order: 'best'
    };

    $scope.sort_orders = ['best', 'most_popular', 'newest'];
    $scope.resources = [{
      name: "Search for Images",
      path: "/search/images",
    }, {
      name: "Search for Videos",
      path: "/search/videos",
    }];

    $scope.selected_resource = {
      path: "/search/images"
    };

    $scope.apirequest = function() {
      if ($scope.selected_resource.path === '/search/images') {
        $scope.request.fields = 'id,title,thumb,referral_destinations'
        if (!$scope.request.hasOwnProperty('sort_order')) {
          $scope.request.sort_order = 'best';
        }
      } else if ($scope.selected_resource.path === '/search/videos') {
        delete $scope.request.sort_order;
        $scope.request.fields = 'id,title,thumb'
      }

      return 'GET ' + $scope.api_uri + $scope.selected_resource.path + '?' + serialize($scope.request);
    }

    $scope.send = function() {
      var req = {
        method: 'GET',
        url: $scope.api_uri + $scope.selected_resource.path,
        headers: {
          'Api-Key': '697wgfynhw53p7fzsw7dbder'
        },
        params: $scope.request
      };

      $http(req).success(function(data, status, headers, config) {
        $scope.apiresponse = data;
        $scope.responsecode = status;
      }).error(function(data, status, headers, config) {        
        $scope.apiresponse = data;
        $scope.responsecode = status;
      });
    };

   
    var serialize = function(dictionary) {

      if (!dictionary.phrase) {
        delete dictionary.phrase;
      }

      if (!dictionary.sort_order) {
        delete dictionary.sort_order;
      }

      var query = []
      for (key in dictionary) {
       ...