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.
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 {
  studentId = "0036300000TlkEIAAZ";
  @wire(getStudentCompletedCourses, { Id: "$studentId" })

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

HTML code:

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

1 Answer 1


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}>
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:


You must log in to answer this question.

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