0

I have an LWC that calls the backend, which makes a callout and returns the response wrapped inside an inner wrapper class with @AuraEnabled member variables and this wrapped class's @AuraEnabled public List<VehicleWrapper> vehicleWrappers list gets displayed in <lightning-datatable>. I am receiving the data object in this format: enter image description here

But when I assign data.vehicleWrappers (an array of objects) to this.vehicleHistory (which is declared as @track vehicleHistory = []) and print, I get a proxy object. Even if I do: this.vehicleHistory = JSON.parse(JSON.stringify(data.vehicleWrappers));, I get a proxy object. Shouldn't I simply get the array without being wrapped in a proxy?

enter image description here

If I print using JSON.parse(JSON.stringify(this.vehicleHistory));, I get as expected, without proxy: enter image description here

So I decided to do this: this.vehicleHistory = JSON.parse(JSON.stringify(this.vehicleHistory)); and print but I see the same proxyed array as in the 2nd image.

I pass the array this.vehicleHistory to a child component. If I pass by stringifying the array to the child component (I know that Arrays are proxied when passed to child components), then parse it and assign it to itself, it works. But it becomes a proxy object if I do something like slicing the array.

Stringify to pass it to child component as

this.vehicleHistory = JSON.stringify(this.vehicleHistory);

in parent component's html file:

<c-paginator records={vehicleHistory} page-size="2" onpagination={handlePagination}></c-paginator>

In the child component paginator's js file:

@api records;
@track recordsToDisplay;
this.records = JSON.parse(this.records);

slicing the array:

this.recordsToDisplay = this.records.slice(this.startingRecord, this.endingRecord);

I have to stringify this.recordsToDisplay and send it in the detail of a custom event to the parent component. But when I parse it again, instead of receiving normal array, I get a proxy object.

Even if I don't stringify and send directly to parent and do this.vehicleHistory = JSON.parse(JSON.stringify(event.detail.sliced));, I still end up with a proxy object. Why JSON.parse(JSON.stringify(event.detail.sliced)) doesn't work here?

So this workaround of stringifying,parsing and passing to and fro between the parent and child component doesn't work in the end.

Parent component's xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Child component's xml:

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

I feel like this should not be this indirect or complicated. Is there a solution?

0

1 Answer 1

1

Shouldn't I simply get the array without being wrapped in a proxy?

There's a number of variables involved here. If all your components have the same API version, are in the same namespace, the Apex method is @AuraEnabled(cacheable=false), and you're using Lightning Web Security, then you might end up receiving a plain Object/Array; I forget if there are additional rules, these are just the ones I recall. If any of these are not true, you're most likely going to get a Proxy. If the variable is bound to any markup, it will also become a Proxy immediately.

However, I feel this may be an X-Y Problem. Simply put, the Proxy is transparent, meaning that the executing code can't tell the difference between an Array and a Proxy that wraps an Array. The Proxy is only there to enforce certain rules (e.g. @api variables are meant to be read-only). Whatever problem you're having, except possibly the annoyance of having to open [[Target]] to visually debug objects, the Proxy is not likely the problem.

3
  • The main problem I am facing is <lightning-datatable> doesnt render the values. In my example I have 2 vehicles, and the datatable displays 2 rows correctly but the columns are all empty as if it is trying to display 2 empty arrays. Therefore I thought it is not able to display because it needs arrays and not proxy.
    – nSv23
    Commented Jun 29, 2022 at 7:51
  • @nSv23 Here's a demo that trivially proves that Proxy isn't the problem. As I said, Proxy is transparent to running code. If I had to guess, you may need to flatten your data.
    – sfdcfox
    Commented Jun 29, 2022 at 13:28
  • The reason why <lightning-datatable> doesn't render the values even though it shows the number of rows correctly is because I am using a wrapper class that implements Comparable interface because I need to sort data I receive from a callout. If I remove the Comparable interface it works. I tried your flatten data but doesn't work. Is there a way to make it work with Comparable interface
    – nSv23
    Commented Jul 5, 2022 at 15:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .