Can’t get ES6 promise value to display in AngularJS view – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and html. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Can’t get ES6 promise value to display in AngularJS view.
Problem :
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 throwing the response inside of a promise so I could put it on my HomeController’s $scope and display it in my view. However, $scope.pins is undefined in my view. Why is it undefined? Seems like the promise is working. Still learning promises.
Pinterest Service
function getBoardPins (id) {
return new Promise(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();
});
});
}
Home Controller
Pinterest.getBoardPins('490329546869188172').then(function (response) {
$scope.pins = response.data;
});
View
<h1>Pinterest</h1>
<div ng-repeat="pin in pins">
<div>{{pin}}</div>
</div>
Solution :
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
$qpromise. 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.
Alternately create the promise with the $q constructor.
function getBoardPins (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.