Arrays from entangle doesn't seem to have built-in array objects

[fireuptheapps]

Hi there,

Noob here and I'm learning so much on these discussions. I'm wondering if someone could explain the issue I'm running into with Alpine JS and Livewire and sharing array data via entangle. It seems arrays coming from Livewire via entangle doesn't have the built-in array functions like array.filter for example. Is it not an array object?

Here is a simple test blade file initializing the combos array in Alpine and everything works perfectly, most notabily the combosSelected function recognizes the this.combos.filter built-in array function.

test.blade.php
`<div x-data="{

combos: [
    {
        id: 1,
        levelId: 1,
        styleId: 1,
        danceId: 1,
        danceName: 'C',
        selected: false
    },
    {
        id: 2,
        levelId: 1,
        styleId: 1,
        danceId: 2,
        danceName: 'R',
        selected: false
    },
],

get combosSelected() {
    return this.combos.filter(combo => combo.selected);
}

}">

<template x-for="combo in combos">
    <button
        type="button"
        x-text="combo.danceName"
        x-on:click="combo.selected = !combo.selected"
        :class="combo.selected && 'bg-red-200'"
        class="px-2 py-1 border rounded">
    </button>
</template>

<span x-text="combosSelected.length"></span>

`

But when I initialize the array in Livewire and pass the data to Alpine like so

Test.php Livewire component
`class Test extends Component
{
public $combos;

public function mount()
{

    $combos[] = [
        'id' => 1,
        'levelId' => 1,
        'styleId' => 1,
        'dancedId' => 1,
        'danceName' => 'C',
        'selected' => false
    ];

    $combos[] = [
        'id' => 2,
        'levelId' => 1,
        'styleId' => 1,
        'dancedId' => 2,
        'danceName' => 'R',
        'selected' => false
    ];


    $this->combos = $combos;

    //dd($this->combos)
}

public function render()
{
    return view('livewire.test');
}

}`

`<div x-data="{

combos: @entangle('combos').defer,

get combosSelected() {
    return this.combos.filter(combo => combo.selected);
}

}">

<template x-for="combo in combos">
    <button
        type="button"
        x-text="combo.danceName"
        x-on:click="combo.selected = !combo.selected"
        :class="combo.selected && 'bg-red-200'"
        class="px-2 py-1 border rounded">
    </button>
</template>

<span x-text="combosSelected.length"></span>

`

I get this error where it's not recognizing the this.combos.filter built-in array function:

Are the arrays initialized in Alpine and Livewire not the same? Is entangle not converting php arrays to a proper json array object?

Thanks in advance!
Steve

[SimoTod]

Have you tried to console.log this.combos inside the getter before the error to see what it returns (if it's a proxy object, use Alpine.raw(this.combos) but it's probably already unwrapped in the getter)?

[fireuptheapps]

Hi SimoTod,

Thanks for the quick reply! It looks like a proxy object.

I updated the getter with the console.log and just tried to return the Alpine.raw(this.combos) like so:

get combosSelected() {
console.log(this.combos);
return Alpine.raw(this.combos);
{{-- return this.combos.filter(combo => combo.selected); --}}
}

I get the following console log and the error message on the return:

The first object looks like a proxy object but unsure what the second object is all about.

If I go back to the Alpine initialization and console log that it shows two of the same proxy objects:

The messages are the same with and without the Alpine.raw(this.combo). Trying to understand this proxy object but I'm still a bit newish. Thanks!

[SimoTod]

Yeah, You don't want to returm Alpine.raw, that would break stuff (as it does). Can you console.log(Alpine.raw(this.combos))? Is that the expected array?

[fireuptheapps]

Right. I did the console.log(Alpine.raw(this.combos)) and the second object is the expected array but the first object is not ( the one with {initialValue:Array(2), _x_intercepter: true, initialized: f} ). Not sure what that's all about.

If I console.log(Alpine.raw(this.combos)) from the Alpine initialized array, I get two of the same array objects which Alpine seems to like so something is different between Alpine initialized array and what coming out of entangle:

If I had to guess, Alpine is not liking either the first object {initialValue:Array(2), _x_intercepter: true.....} or the second object is not a Proxy object coming from entangle. Could this be a Livewire issue? Is there a workaround?

[SimoTod]

So, the unwrapped value is what you would expect if it was just vanilla javascript. In your case the second time is right but the first time is some sort of magic object created by entangle for a very short time. Entangle is defined in the livewire codebase by the way so I'm not sure if some livewire users can explain better what it is.

A simple workaround for now would be
return Array.isArray(this.combos) ? [] : this.combos.filter(...)

[fireuptheapps]

Thanks SimoTod. Spot on. The workaround works perfectly (just needed to switch the logic). Don't know why I didn't think of just ignoring the magic object to make it work. Yeah, curious to know more about what entangle is doing. I found there was an issue with entangle where calebporzio says something about "deep cloning and references never get crossed" but it's over my head. Anyways, thank you very much for your explanation and help.

livewire/livewire#1682 (comment)

"For context: the issue is because when using @entangle, Alpine was actually storing an exact reference to Livewire's array, so when Alpine mutated the array, it triggered the watcher, but checked to see that the values were different before sending the update to Laravel. Because both values are the same, it just skipped the Livewire update. I'm now deep cloning @entangle values so Alpine and Livewire references never get crossed."