Proxy in x-init and not array

[ledahu]

Hi

assume the code :

function mystuf(){
return{
myStart:[],
myArray:[],
async update(){
this.myArray=await initialisation() //with the json.parse/stringify trick
},
whatisit(){
console.log(this.myArray['goodKey'])
console.log(this.myArray)
},..... 

then html

<ul  x-data=" mystuff() " x-init=" await update()">
                        <template x-for="item in myStart">
                            <x-menu></x-menu>
                        </template>
                    </ul>

and

    <template x-component="menu">
        <div x-data="{ ...$el.parentElement.data() }">
            <button x-on:click="whatisit()">Open</button>
            <template x-if="true">
                <div x-data="{ whatever: '' }" x-init="whatisit()">
                    <span x-text="whatever"></span>
                </div>
            </template>
        </div>
    </template>

so , when i launch , the whatisit() of the x-init
=>this.myArray['goodKey'] give undefined
=>this.myArray give the proxy but with all the array in the target

if i clic on the x-component button ,
=>this.myArray['goodKey'] give the good value of this key and the array structure (without proxy)

note: i tryed x-init="() => { whatisit() }" or x-init=" $nextTick(() => { whatisit() })"

i can't understand why do i get a proxy (even jsonified) object with all data but i can't access one key

What do i miss ?

thank you

[KevinBatdorf]

Can you put it in a demo and spend some time formatting the code to be easier to read?

I'm not sure what x-component is but does removing that fix anything?

On load, you have myArray:[] set, which doesn't have goodKey set. So if you're trying to access it while the data is still being fetched, it will throw an error.

[ledahu]

the x-component comes from here : #1205

yes, myArray is empty at init
myArray is populated at x-init=" await update()"

but the really strange behavior is that the x-component seems to be init before the mystuff component
BUT the x-component acces data of mystuff
i mean in the x-if , if i put a mystuff boolean, the boolean is working right

i tryed to move the "document.querySelectorAll('[x-component]')." in the initisialized Alpine event, thinking that its because it trigger it too quicly, but no, its not the case.

i think that, may be , the " ...$el.parentElement.data()" doesnt pass the object/array data well , i dont know.

I gonna try to format a pure demo of this case

[KevinBatdorf]

Just add a default value for those properties, or add a check before using them.
Object.prototype.hasOwnProperty.call(this.myArray, 'goodKey') ?? 'loading...'