Where to await after a proxy assignment?

JavaScript
1

I have a select drop down named network-security-group which is tied to a global store Alpine.store('global_data').network_security_groups

Thing is,

console.log("network_security_groups =", Alpine.store('global_data').network_security_groups);

is printing a proxy :

network_security_groups = Proxy(Array) {0: {...}, 1: {...}, 2: {...}, 3: {...}, 4: {...}}

so a print document.getElementById('network-security-group').options[0] right after, always prints undefined

return fetch(request, {
    method: 'POST',
    mode: 'same-origin',
    body: formData
})
.then(response => response.json())
.then(response =>
{
    const network_security_groups = JSON.parse(response['data']);

    network_security_groups.forEach((nsg) =>
    {
        // Add only if the id doesn't already exist in the dropdown
        const index = Alpine.store('global_data').network_security_groups.findIndex(n => n.nsg_id === nsg.id);        
        if (index === -1)
        {
            Alpine.store('global_data').network_security_groups.push( {someObject data} );
        }
    });

    const nsgEl = document.getElementById('network-security-group');
    console.log("nsgEl =", nsgEl);
    console.log("network_security_groups =", Alpine.store('global_data').network_security_groups);    

    console.log(nsgEl.options[0]); // undefined
});

I can’t seem to figure out where to await.

2

a Proxy is not a Promise. There’s nothing to await, you’ve already got the data.

3

But console.log(nsgEl.options[0]); prints undefined whereas when I do the same in Inspect Element > console it prints it correctly.

4

So it works, just not in that exact nanosecond. Interesting, but only marginally relevant; you’ve already got the data available to you if you catch the output of Alpine.store('global_data').network_security_groups into a variable.

I have no idea how often Alpine.js refreshes the element data.

5

As a thought to try, what happens if you move that reference into a new .then ?

1 Like
6

That worked. Thanks a ton !

1 Like