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>

1 Answer 1

3

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.

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

You must log in to answer this question.

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