Why array element is treated as proxy as raise error when mapping it?

Question

In Laravel 8 / livewire 2.5 / alpinejs 3 application I make context menu for listing of data and to show only 1 context menu on server side I senerate on server side array :

foreach( $this->newsDataRows as $nextNewsDataRow ) {
    $this->selectedNews[$nextNewsDataRow->id] = false;
}

in blade file :

selectedNews: @json($selectedNews),

and condition for context menu :

 <div class="show_context_menu_container" x-show="selectedNews[{{$news->id}}]"

Problem is that when context menu is selected and operation completed I trigger event to set all elements of selectedNews into false :

window.addEventListener('hideAllSelectedNewsItems', event => {
    console.log('hideAllSelectedNewsItems::')
    console.log( this.selectedNews )

    this.selectedNews.map((nextSelectedNews, index) => {
        console.log('nextSelectedNews::')
        console.log(nextSelectedNews)
        this.selectedNews[index]= false
    })

})

But I got error : https://prnt.sc/YKDvN_MfbYBN I wonder why this.selectedNews is treated as proxy and in which way it can be fixed ?

Thanks!

*"But I got error"* Please post code, error messages, markup, and other textual information **as text**, not as a *picture* of text. Why: http://meta.stackoverflow.com/q/285551/157247 — T.J. Crowder, Feb 18 '22 at 09:03
`this.selectedNews` seems to be an object, you can't use `.map()` on a object — Vincent Decaux, Feb 18 '22 at 09:21
How can I convert this.selectedNews into array when making init of selectedNews: @json($selectedNews), keeping structure of this array ? — mstdmstd, Feb 18 '22 at 09:28
also @json($ returns arrar, but somehow it was convert into array. I do not make any operations with selectedNews on client side — mstdmstd, Feb 18 '22 at 09:34
Thanks for hints. Could you please explain me what is "Proxy" here ? Some internal vuejs class ? also laravel @json($ returns array and I do not see where from I got "Proxy" ... If there is a way to convert it into array(pair of key/values)... — mstdmstd, Feb 25 '22 at 12:37
The fact that it is a proxy is irrelevant. Except for what the console can know about it, a proxy is transparent. The thing that is important is what the (proxied) object is, because that is what you will be working with. And you can see from the error message that it is not an array, but a plain object (note the braces). — trincot, Mar 06 '22 at 07:45
Can you propose some practical way 1) To check it is proxy obect 2) if yes get values from it. I have problems with it in my app. Searching in net I found some ideas/descriptions of it, but not valid practical good/simple decision — mstdmstd, Mar 06 '22 at 07:55

score 0 · Accepted Answer · answered Mar 06 '22 at 07:29

I found a decision with entries method, converting proxy object into array

selectedNews = Object.entries(this.selectedNews)
this.selectedNews = []
var self = this
selectedNews.map((nextSelectedNews, index) => {
   console.log('nextSelectedNews::')
   console.log(nextSelectedNews)
   ...
})

Not sure it is a best decision, but it works for me.

Why array element is treated as proxy as raise error when mapping it?

1 Answers1