How to make an AngularJS service that will retrieve data from Behance API?

Question

I have been trying to create a AngularJS service that will get data from behance profiles.

I am injecting the $http and $q services to enable me to make requests to Behance API. I am using a literal string for the url parameter for now to see how to resolve my issue. I will refactor my code to make it dynamic later.

behance.js File with the service relative to my Angular app.

'use strict';

angular
  .module('angularPortfolioApp')
  .factory('behanceUserData', ['$q', '$http',
    function($q, $http) {
      var service = {
        getUser: function(username) { //ignore the parameter in this function I plan on implementing that after I have my question resolved.
          var d = $q.defer();
          $http({
            method: 'JSONP',
            url: 'https://www.behance.net/v2/users/USERNAME?api_key=XXX' 
          }).success(function(data) {
              d.resolve(data);
          }).error(function(reason) {
              d.reject(reason);
          });
          return d.promise;
        }
      };
      return service;
    }
]);

app.js Declaring my Angular app with it's required dependencies.

'use strict';
angular.module('angularPortfolioApp', ['ngResource']);

In Chrome dev tools console I get an error of Uncaught SyntaxError: Unexpected token :

After doing some research I did find an article that stated that Angular does tack on a ":1" to the end of a JSONP request.

I am still having trouble understanding how I can get a successful request from an API especially from the behance API. I can still see the results in the web dev tools but since what ever I put into my .success block never runs I would appreciate some guidance.

The same code can also be seen in this plunker http://plnkr.co/edit/RZ42Y38BwKZBF2pGZJSR

Answer 1

I've updated your plunker .

You can use for getting any data from Behance API the following code:

angular.module('angularPortfolioApp', ['ngResource']);

angular
    .module('angularPortfolioApp')
    .factory('behanceUserData', ['$q', '$http',
        function($q, $http) {
            var service = {
                getUser: function(username) {
                    var d = $q.defer();
                    $http({
                        method: 'GET',
                        url: 'https://www.behance.net/v2/users/USERNAME?api_key=XXX' 
                    }).success(function(data) {
                        console.log(data);
                        d.resolve(data);
                    }).error(function(reason) {
                        console.log(reason);
                        d.reject(reason);
                    });
                    return d.promise;
                }
            };
            return service;

        }
    ])
    .controller('MyController', function($scope, behanceUserData){
         $scope.getUser = function(){
            $scope.user = behanceUserData.getUser();
         }
      }
    );

And in your view:

<div ng-controller="MyController">
  <button ng-click="getUser()">Get</button>
  <br/>
  {{user | json}}
</div>

Plunker

But you should change this URL: 'https://www.behance.net/v2/users/USERNAME?api_key=XXX' because currently it not works.

Answer 2

I was able to get the data into my model by using the following factory.

.factory('behanceUserData', ['$q', '$http', 'BEHANCE_CLIENT_ID',
   function($q, $http, BEHANCE_CLIENT_ID) {
     return {
            getUser: function(username) {
                var q = $q.defer();
                $http({
                    method: 'jsonp',
                    url: 'http://www.behance.net/v2/users/' + username,
                    params: {
                      client_id: BEHANCE_CLIENT_ID,
                      callback: 'JSON_CALLBACK'
                    } 
                }).success(function(data) {
                  console.log(data);
                  q.resolve(data);
                });
                return q.promise;
            }
        }; 

    } 
])