[SalesForce] Why is javascript class property is showing as Proxy object in getter

Following is the javascript code I wrote for one of the lightning-web-component. When I am trying to use getter function in HTML, the component is throwing an error Cannot read property 'length' of undefined. I debugged the code and found that type of this.studentGradedCourses is Proxy{} and it has properties:

[[Handler]]: ReactiveProxyHandler
[[Target]]: Object
[[IsRevoked]]: false

I don't know what happening and why it is turning into a Proxy object.
According to documentation, no error should be thrown.
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.data_wire_service_about.
I am stuck on this for hours, please help me.
JS code:

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

export default class StudentProfile extends LightningElement {
  @track
  studentId = "0036300000TlkEIAAZ";
  @wire(getStudentCompletedCourses, { Id: "$studentId" })
  studentGradedCourses;

  get gradedCoursesLength() {
    return this.studentGradedCourses.data.length;
  }
}

HTML code:

<template>
    <div class="container">
        <div>
            <b>Course Grade Of D/F: {gradedCoursesLength}</b>
        </div>
    </div>
</template>

Best Answer

You are not conditionally rendering your data. I think that's the problem. Notice that when your component loads, it doesn't immediately retrieve and assign the value to the studentGradedCourses property yet. It is an asynchronous process.

Try to surround your <b> tag with a <template> tag, like:

<template if:true={propIsDefined}>
    <b>{prop.data.length}</b>
</template>

get propIsDefined () {
    return this.prop !== undefined && this.prop.data !== undefined
}

When you use console.log to show what the property is, you'll get the Lightning Locker's Proxy object. It is enabled by default, and is a security feature. If you want to display the value of it though, you can use this little gimmick:

console.log(JSON.parse(JSON.stringify(prop))
Related Topic