0

i got data from Apex method and trying to bind to template by using property, data is not shown in UI and No errors happened. simple logic but killing my time to resolving. can you help me for where i did wrong.

import { LightningElement,api,wire,track } from 'lwc';
import gettransporterByCase from '@salesforce/apex/IMS_EventInfo.gettransporterByCase';

export default class IMS_EventReporter extends LightningElement {
@api recordId;
caseUserMapresp;
@track caseInfo = {};
@track userinfo= {};

@wire(gettransporterByCase,{caseId: '$recordId'})
wiredCaseReporterMap(serverResp){
    this.caseUserMapresp = serverResp;
    if (serverResp.data) {
        this.caseInfo = serverResp.data.Case[0];
        this.userinfo = serverResp.data.User[0];
        this.error = undefined;
    }
    else if (serverResp.error){
        this.error = serverResp.error;
        this.caseInfo = undefined;
        this.userinfo = undefined;
    }
}

get reporterrecid(){
    return this.caseInfo.Reporter__c; 
}
get loggedinprofilename(){
    return this.userinfo.Profile.Name;
}

html

<template>   
   hello,{reporterrecid}
   hello,{caseInfo.Reporter__c}
</template>

Update

i updated the template but now out put is nothing, even "hello," message also not dis plying. what i observed property break point is not hitting idk why. enter image description here output enter image description here

UPDATE what i observed reporterrecid property break point hits only one time that time caseInfo is undefined

UPDATE it's working after i assign a empty object to caseInfo; -- @track caseInfo = {}; enter image description here

8
  • 1
    The property does not have @track, so it's not reactive Mar 26, 2020 at 19:45
  • 1
    Check the case of the getter, the code you pasted says "reporterrecId" and in the console it says "reporterrecid" Mar 26, 2020 at 19:50
  • 1
    More on @SebastianKessel's comment - not only is this not tracked, there doesn't really seem a point to it. Why not simply use caseInfo.Reporter__c in the template (which should react since this.caseInfo is itself tracked).
    – Phil W
    Mar 26, 2020 at 19:53
  • I am on calls, but one of you should post your answers below... :) Mar 26, 2020 at 19:54
  • 1
    You still have a discrepancy between the template and the JS in the snippet you posted. And, if you see nothing, check the console Mar 26, 2020 at 21:38

3 Answers 3

2

Check the case of the getter, the code you pasted says "reporterrecId" and in the console it says "reporterrecid"

5
  • That alone should fix the problem. JS properties are case sensitive Mar 26, 2020 at 19:55
  • I doubt it will - this isn't a tracked property so only its initial value (undefined) will render into the template.
    – Phil W
    Mar 26, 2020 at 19:58
  • 2
    This is most likely the correct answer. you don't need to add a @track to getter methods. They'll update the page if they reference a tracked variable themselves, which this one does.
    – stackasaur
    Mar 26, 2020 at 20:24
  • i updated template with reporterrecid still value is not binding in UI.
    – sdandamud1
    Mar 26, 2020 at 21:10
  • @stackasaur is correct, that's why I mentioned that in my comment Mar 26, 2020 at 21:32
0

This property is not tracked. As such its initial value, undefined, will be rendered into the template on first pass. When it is set, during the wire response handling, there is nothing to kick the re-rendering of the template.

Either make it tracked using:

@track get reporterrecId(){
    return this.caseInfo.Reporter__c; 
}

and fix the case mis-match, or try changing your template to:

<template>   
   hello,{caseInfo.Reporter__c}
</template>
3
  • @track as per documentation: "If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value."
    – stackasaur
    Mar 26, 2020 at 20:20
  • Ah, that change in Spring '20 where all "fields" are automatically tracked... I need to have a play with this new behaviour.
    – Phil W
    Mar 26, 2020 at 20:50
  • It's actually been the case with not needed to add @track to getter methods which reference a tracked property for a while. I'm not sure what they're on about with "automatically tracked" though.... I just made a component to test this with a button toggling it's label to match a Boolean value it's updating and it doesn't work unless tracked.
    – stackasaur
    Mar 26, 2020 at 21:03
0

So I believe this is just a null pointer issue.

@wire is asynchronous, meaning it is calling back after your page renders, thus your caseInfo and userInfo variables aren't set by the time your getter method is trying to render them the first time.

And so, this.caseInfo.Reporter__c is a null pointer since this.caseInfo isn't set. Not really sure why you aren't getting an error message though.

Anyway, you should be able to modify both getters to reflect this

get reporterrecid(){
    if (this.caseInfo)
        return this.caseInfo.Reporter__c; 
    return ''; // or null or whatever
}

You must log in to answer this question.

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