web request inside angular filter issue

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Rob Schall 3 posts 72 karma points

Apr 18, 2022 @ 01:02

0

Web Request inside Angular Filter Issue

Using Umbraco And Getting Started

Umbraco 9

Version: 9.4.3

There may be other ways to accomplish this (so please let me know if you guys all a better way).

I have a custom Drop Down Data Type (app plugin) that pre-fills its values based on a database/api endpoint call. That functionality is working without issue.

The issue is in using the blocklist editor, setting the label to display a useable string. The value that's stored is an ID (which makes sense as that's the dropdown value). But I actually need the drown down value's name. My solution (or attempted solution) was to create an angular filter which would take that ID value, make another API endpoint call, get the name and return it. The filter gets the ID without a problem. However, when I attempt to make an AJAX call (either using the $http or fetch calls, those are async calls and while it does fire the function all, it just skips right past it (no "await") and finishes with the function. It doesn't appear I can change that filter to run as an async function to allow me to add the necessary await statements to have it wait the few milliseconds it needs to get its result.

This kind of makes sense as a filter typically would be to format the output available in a more friendly manner and there wouldn't be a need to "wait" for some complicated task to complete. But I'm not sure how else I could get the label to include something more custom.

Any thoughts on the ability to have the filter by async OR some other means to get that dropdown values name?

Thanks in advance.

Rob

Copy Link
Mark Drake 133 posts 457 karma points c-trib

Apr 21, 2022 @ 02:47
0
Use the Browser's Local Storage...

Assuming you're not working with a lot of data you could choose to store the results of your API call to localStorage. Then, from your filter, you could reference the data stored in localStorage for your lookup.

This is a bit of a hack, in the sense that I wouldn't be happy with the solution myself. It'll get the job done for now, but you'll probably want a more robust solution that can handle situations like local storage being completely cleared, and the API having never been called.

Continue Fiddling with an Async Filter...

I found this answer on Stack Overflow, I'm wondering if it would get you any closer? It's supposedly a way to first show a temporary string, and once the data becomes available the string should update to the correct value.

Be especially cognizant of the myFilter.$stateful = true code below which is necessary after AngularJS 1.3.
```
app.filter("translate", function($timeout, translationService) {

    var isWaiting = false;
    var translations = null;

    function myFilter(input) {

        var translationValue = "Loading...";
        if(translations)
        {
            translationValue = translations[input];
        } else {
            if(isWaiting === false) {
                isWaiting = true;
                translationService.getTranslation(input).then(function(translationData) {
                    console.log("GetTranslation done");
                    translations = translationData;
                    isWaiting = false;
                });
            }
        }

        return translationValue;
    };
    myFilter.$stateful = true;

    return myFilter;
});
```
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Use the Browser's Local Storage...

Continue Fiddling with an Async Filter...