Simple fetch do not work

[bubnenkoff]

I wrote very simple code:

<div 
    x-data="{regions: []}" 
    x-init="regions = await fetchRegions()" 
>
    <ul>
        <template x-for="item in regions">
            <li x-text="item['ru_name']"></li>
        </template>
    </ul>

</div>


<script>
   async function fetchRegions() {
        return {
            isLoading: false,
            regions: await foo(),
        }
        
       async function foo() {
            const result = await fetch(`http://127.0.0.1:5001/regions`);
            if(result.ok){
                let json = await result.json();
                console.log(Alpine.raw(json));
                return json['data'];
            } else {
            }

        }

        }
</script>

And I see only:

But in console I see full data:

[SimoTod]

I don't think you can do it that way, you are using an async function to define x-data so everything is undefined. You can use a sync function, provide a sensible default for regions and populate it on init.

[bubnenkoff]

@SimoTod could you show me how sync function could look like?

I have only one idea:

<div 
    x-data="{regions: []}" 
    x-init="regions = fetchRegions()" 
>
    <ul>
        <template x-for="item in regions">
            <li x-text="item"></li>
        </template>
    </ul>

</div>


<script>
   function fetchRegions() {
        return {
            isLoading: false,
            regions: await foo(),
        }
        
       async function foo() {
            const result = await fetch(`http://127.0.0.1:5001/regions`);
            if(result.ok){
                let json = await result.json();
                console.log(Alpine.raw(json));
                return json['data'];
            } else {
            }

        }


        }
</script>

But:

[SimoTod]

<div x-data="yourFunction" x-init="foo = await bar()">...</div>

<script>
function yourFunction() {
  return {
    foo: [], //default to empty array
    async bar() {
      ... //your fetch
   } 
}
</script>

For example.

[SimoTod]

You also want to have a look at auto init and Alpine.data when you have time: https://www.alpinejs.dev/globals/alpine-data#init-functions

[bubnenkoff]

@SimoTod
is it's correct syntax?

    async bar() {
      ... //your fetch
   } 

Do I need to place bar() inside yourFunction() ?

[SimoTod]

Yes, it's valid syntax. You don't have to but in Alpine, each component tends to be self encapsulated. It will also work if you use an external function. All those combinations are valid and pretty much equivalent: https://codepen.io/SimoTod/pen/BawzVrv

[bubnenkoff]

Big thanks!