0

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>
0

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))
  • That worked. I added a conditional statement in the getter and it worked. Thank you. – Sri Harsha Jun 25 at 1:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.