Can't Get Es6 Promise Value To Display In Angularjs View

I'm trying to use the Pinterest JavaScript SDK to get some pin data for a project. I have a method in a Pinterest service I created that gets called in my HomeController. I tried t

Solution 1:

Use $q.when to convert the ES6 promise to an AngularJS promise:

$q.when(Pinterest.getBoardPins('490329546869188172'))
  .then(function (response) {
    $scope.pins = response.data;
});

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

To bring an ES6 promise into the AngularJS execution context, use $q.when.

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

— AngularJS $q Service API Reference - $q.when

---

Alternately create the promise with the $q constructor.

functiongetBoardPins(id) {
  //return new Promise(function(resolve, reject) {
  return $q(function(resolve, reject) {
    PDK.request('/v1/boards/' + id + '/pins/', 'GET', {fields: 'id,link,url,creator,board,created_at,note,color,counts,media,attribution,image,metadata'}, function(response) {
      if (response) {
        resolve(response);
      }

      reject();
    });
  });
}

This creates a promise that is integrated with the AngularJS framework and its digest cycle.