Getting value of array property

[wobsoriano]

I have an array property and when I try to save it to another storage, it it saved as an object instead of array.

function App() {
  return {
    items: [],
    async saveToDB() {
        await axios.post('/blabla', {
            items: this.items
        });
        // items property is an object instead of array
        console.log(Array.isArray(this.items)) // returns false
    }
  }
}

How can I get the real value of the items property instead of the Proxy object?

[HugoDF]

That doesn't sound right, Proxies are transparent to underlying object type.

In any case to solve this issue you can try the following:

JSON.parse(JSON.stringify(this.items)) is one way to do it.

You might be able to use Alpine getUnobservedData, $el.__x.getUnobservedData().items (if you're inside the component)

[stuartcusackie]

I am seeing behavior like this too. My arrays come back as a Proxy, which causes all kinds of issues.

Is this normal? I'm running quite an old Webpack build so something could be going wrong in the compiler.

[ryangjchandler]

This is the correct/normal behaviour, Alpine's reactivity core uses Proxy objects to watch for changes on your data, that includes arrays. They are also polyfilled by Alpine out of the box so your Webpack configuration is unlikely going to be a problem.

What sort of problems are you having?

[stuartcusackie]

Well, I'm actually not sure if the Proxy is causing a me a problem now. I was blaming it because it is the first time I've dealt with this data type, and it looked very strange.

Example: I am making a Ajax JSON Post request and it contains my Alpine array / Proxy. When outputting my Post data to the console it looks like this:

I was initially assuming that this data is not being posted correctly, but perhaps Axios / JQuery transforms the Proxy to a JSON string automatically. I'm working with WordPress at the moment so debugging the data coming through at the endpoint isn't the easiest.

[SimoTod]

can you check the network tab to see what is actually posted?

[stuartcusackie]

Ah yes... Of course, I should have checked there. The array data is being posted as normal after being transformed to JSON by JQuery Ajax.

Thanks for your help.

[HugoDF]

If you want to unwrap your data, feel free to use JSON.parse(JSON.stringify(someVariable)) liberally

Most JS code has basically no idea it's interacting with a proxy, the instance/constructor is what was proxies but when you log it out, the browser knows.

[aryawirasandi]

I think my solution was not a best practice but for me, if I need to get the Array value that was initiated in the state, then I need to store the state in localStorage and to sync with it i will put in the watch effect at init function

    foo: [{ id : 1, title : "bar" }, { id : 2, title : "bar" }]
    init() {
      this.$watch("foo", () => {
        localStorage.setItem("foo", JSON.Stringify(foo))
      })
    },

so when my function need the array value i could get from localStorage

    triggerSomething(){
       const foo = JSON.parse(localStorage.getItem("foo"))
       foo.map(item => {
         console.log(item.title)
      })
    }

[ekwoka]

You could just directly JSON.parse/Stringify the proxy without using localStorage.

or use Alpine.raw()

[aryawirasandi]

okay I'll try the Alpine raw, some times I've tried to use the JSON.parse(JSON.Stringify(foo)) but will return -> []

[ekwoka]

The best answer, is that Alpinejs uses vue reactivity, and vue reactivity provides a __v_raw key that will return the underlying object without reactivity.

So just do

items.__v_raw

But Actually, EVEN BETTER!!!

Alpine.raw(items)

That is the appropriate way to do it :D