0

I am hoping a better JS developer can explain to me why one of these methods fails and the other works. I have some wired Apex to get data into an LWC. If I used a tracked property and 'this.property = data'. I would get an undefined error.

But if I call the info directly from the wired property everything works. The Salesforce documentation seems to be telling me to give the data to a trackable property. Wired Apex Documentation

Where is my JS that throws an undefined error going wrong?

Here is my JS that works

import {LightningElement, wire, track} from 'lwc';
import getBenchmarkValues from '@salesforce/apex/BenchmarksSelector.getOverAllBenchmarks';

export default class OverAllBenchmarks2 extends LightningElement {


  @wire(getBenchmarkValues)benchmarks;
}

HTML That works

<template>
    <lightning-card title="Overall Benchmark Values">
        <template for:each={benchmarks.data}  for:item='benchmark'>
            <p key={benchmark.id}>Program Delivery Rate <span>{benchmark.Program_Mean_Delivery_Rate__c}%</span></p>
            <p key={benchmark.id}>Hello This is a test</p>
        </template>
    </lightning-card>
</template>

JS that fails

import {LightningElement, wire, track} from 'lwc';
import getBenchmarkValues from '@salesforce/apex/BenchmarksSelector.getOverAllBenchmarks';

export default class OverAllBenchmarks extends LightningElement {
    @track benchmarks;

    @wire(getBenchmarkValues)wiredBenchmark({data, error}){
        if(data){this.benchmarks = data}
        console.log(data);
        console.log(this.benchmarks);
    }
}

HTML That Fails

<template>
    <lightning-card title="Overall Benchmark Values">
        <template for:each={benchmarks.data}  for:item='benchmark'>
            <p key={benchmark.id}>Program Delivery Rate <span>{benchmark.Program_Mean_Delivery_Rate__c}%</span></p>
            <p>Hello</p>
        </template>
    </lightning-card>
</template>
2

The problem in the second JS, HTML is you have defined benchmarks as

if(data){this.benchmarks = data}

So you should be accessing it in HTML like

<template>
    <template if:true={benchmarks}>
    <lightning-card title="Overall Benchmark Values">
        <template for:each={benchmarks}  for:item='benchmark'>
            <p key={benchmark.id}>Program Delivery Rate <span>{benchmark.Program_Mean_Delivery_Rate__c}%</span></p>
            <p>Hello</p>
        </template>
    </lightning-card>
    </template>
</template>

rather than {benchmarks.data}, because there is nothing like data in benchmarks.

  • I made those updates but I still get an error that 'Program_Mean_Delivery_Rate__c is undefined' – Brooks Johnson Oct 31 at 13:12
  • 1
    @BrooksJohnson please check the updated code. The null check was missing added that – rahul gawale Oct 31 at 13:16
  • Am I looking in the wrong place? Not seeing any updated with a null check. – Brooks Johnson Oct 31 at 13:30
  • 1
    @BrooksJohnson this = <template if:true={benchmarks}> – rahul gawale Oct 31 at 13:34
  • 1
    Perfect, Assuming the null check just stops the Component from loading before the wire method has returned data? – Brooks Johnson Oct 31 at 13:51

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.