Angular JS - returning results from an async operation

Question

Angular JS - 1.6.9

Have been working on this for hours, confessedly, I am very not practised in Angular JS and would appreciate some guidance.

I have an element that every time information is updated in fields across a form, it will update a "preview pane" using the information from those fields, reading a template file, and substituting the values, printing that information to said preview pane. (Note: right now I'm reading every time every field is updated in any way, and I know this is bad, and later after I get THIS working, I will work on caching. So, I am not asking for help on this part, cos I know I have to address it and will later.)

I've tried this in so many ways and this is most recent attempt, after hours of fiddling and I just keep getting undefined as a result to my console.

I am pretty confident this really just has to do with my absolute misunderstanding of asynchronous things.

I have had debugging info in fillTemplate() and it does successfully read the file, just, it is not getting to the browser.

HTML:

<div class="col text-monospace small shadow p-2 mb-2 pre-scrollable"> {{updateItemInformation()}} </div>

 var app = angular.module('app', ['ngSanitize']); app.controller('c', ($scope, $sce) => { $scope.updateItemInformation = async () => { let result ; const maxLineLength = 80; result = await fillTemplate($scope.item) ; console.log(result) ; return result ; }; async function fillTemplate(item) { let result = ""; const response = await fetch(`./templates/${item.category}.template`) const template = await response.text() if(!template) return ""; return template ; }

You mention it successfully reads the file. As in your fetch returns successfully? Have you tried wrapping your awaits inside of a try-catch to ensure its not swallowing an error? You may have better luck instead of depending on the template to trigger your async function; bind to a string in the scope, update that string from your update function, and trigger the update via an event. That way you aren't fighting the digest cycle for debugging. — Mark Clark
– Mark Clark, Commented Aug 21, 2023 at 16:32

aUXcoder · Accepted Answer · 2023-08-21 15:01:37Z

AngularJS, does not inherently support asynchronous programming using the async/await syntax that is commonly used in modern JavaScript frameworks. Use the $q service to build promises and $http for XMLHttpRequest.

The following example is just a general reference about building promises (async calls) in the AngularJS way. It is not a literal solution.

var app = angular.module('app', ['ngSanitize']); app.controller('c', ($scope, $sce, $http, $log) => { $ctrl.$onInit = () => { $scope.template = ''; $scope.updateItemInformation = updateItemInformation; } function updateItemInformation() { fillTemplate($scope.item) .then(response => { $scope.template = response; }) .catch(error => { $log.error(error) }); } function fillTemplate(item) { const _deferred = $q.defer(); $http.get(`./templates/${item.category}.template`) .then(response => { if (!response) _deferred.reject('Template not found'); _deferred.resolve(response) }) .catch(error => { _deferred.reject(error) }) return _deferred.promise; } }

Inherently, no. Implicitly, yes. You can still use async-await keywords with promises returned by $q. stackoverflow.com/questions/62177913/…

Collectives™ on Stack Overflow

Angular JS - returning results from an async operation

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related