How to get Proxy object content?

Question

I am working with lightning web component and apex class. This is new for me.

I am trying to get the content of a Proxy object generated by an Apex class.

But when I console log it I have a result like this :

Proxy { <target>: {}, <handler>: {…} }

This is my LWC component :

import { LightningElement, track, wire } from "lwc";
import getAllActiveAccounts from "@salesforce/apex/AccountsController.getAllActiveAccounts";

export default class HelloWorld extends LightningElement {
  @wire(getAllActiveAccounts) accounts;

  @track foo;
  click() {
    console.log("Show Proxy object accounts ", this.accounts); // Show Proxy object
    console.log("Foo", this.accounts.name); // Show `undefined`
  }
}

Apex class :

public with sharing class AccountsController {
  @AuraEnabled(cacheable = true)
  public static List < Account > getAllActiveAccounts() {
    return [SELECT Id, Name FROM Account LIMIT 10];
  }
}

The Html template is a button that show the console.log on click.

I want to know if it's possible to show the names provided by the apex class ? Or a way to show the Proxy object content or the availabel keys.

I was very confused when I encountered this too. – Daft Dec 14 '20 at 14:15 — Daft, Dec 14 '20 at 14:15

score 21 · Answer 1 · answered Feb 04 '20 at 14:33

21

To print the Proxy Object use:

JSON.stringify(this.accounts)

To actually use it on some functions use this:

let accounts = JSON.parse(JSON.stringify(this.accounts))
console.log(accounts.name)

answered Feb 04 '20 at 14:33

panatoni

735
6
13

score 5 · Answer 2 · answered Aug 19 '19 at 14:58

So what you can do is instead of logging the Proxy object, perform a JSON.stringify():

console.log("Show Proxy object accounts ", JSON.stringify(this.accounts));

Another great trick is to use the custom dev formatter: https://dev.to/daveturissini/debug-lightning-web-components-lwc-track-and-api-properties-using-chrome-dev-tools-formatter-49c5

Also this blog provides lots of good advice: https://developer.salesforce.com/blogs/2019/02/debug-your-lightning-web-components.html

score 4 · Accepted Answer · answered Aug 19 '19 at 15:17

4

To get the available keys, you can use Object.key & .data on the Proxy object.

In your case, you can get the keys with this way :

console.log(Object.keys(this.accounts.data[0]));

answered Aug 19 '19 at 15:17

R3tep

12,512
10
48
75

score 2 · Answer 4 · answered Aug 19 '19 at 18:45

2

You can also expand the proxy object, expand the handler object, and then expand the originalTarget object to see the actual object

answered Aug 19 '19 at 18:45

TemporaryFix

2,008
3
30
54

How to get Proxy object content?

4 Answers4