async function as input for x-data

[matthiasstorr]

Hello,

i am currently trying to get my code snippet to work but at the moment i have no idea to proceed further - maybe one of you can lead me in the right direction:

I want to fetch data from an api asynchronously. I get it to work by the following code snippet.
Working example:

<div x-data="devices()" 
         x-init="foo.getMyDevices()
                     .then(data => {myDevices = {...data.devices};})
                     .catch(err => console.log(err));">

<script> function devices() {
               return {
                            myDevices: {}
              }
            };
</script>

But at best it should look something like this. But then i get the error, that Object.defineProperty is called on non-object
How i actually want it to work:

<div x-data="getMyDevices()">
<script> const getMyDevices = async () => {
                 const response = await foo.getMyDevices();
                 const myDevices = await {...response.devices};
                 return {
                    myDevices
                 }
              };
</script>

[SimoTod]

An async function returns a promise which breaks alpine since it needs a standard object for the scope. I never tried if it works for x-data but you can try to use await in the directive: https://alpinejs.dev/advanced/async

[matthiasstorr]

Thanks for your fast reply. I actually tried it but didn’t work. So I will use my workaround.

[SimoTod]

Yeah, I wasn't 100% sure because x-data does other stuff as well. Maybe it's not possible at the moment

…

On Sat, 30 Oct 2021, 21:49 matthiasstorr, ***@***.***> wrote: Thanks for your fast reply. I actually tried it but didn’t work. So I will use my workaround. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2287 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACAJRWPGFE2WOA2ZKRTHVVTUJRR7NANCNFSM5HBMTO2A> .