When loading some data in my HTML I get an error: Uncaught (in promise) TypeError: Cannot read property 'item' of undefined which mean that there is something I do not understand regarding the Wire properties. I have a first wire that call for a list of records:
_wiredOppData;
@wire(OpportunitiesFromMarket, { MarketId: '$selectedMarket' , countryCheckBox: '$countryCheckBox', selectedCountry:'$selectedCountry'})
retrieveOpportunities(wireResult){
const { data, error } = wireResult;
this._wiredOppData = wireResult;
if(data){
console.log("OppData", data)
this.records = data
this.calcKPIs
console.log('OppCountStatus',this.OppCountStatus)
}
if(error) {
console.error(error)
}
}
Then I have another wire to call a list of status for a specific object:
@wire(getPicklistValues, {
recordTypeId:'$objectInfo.data.defaultRecordTypeId',
fieldApiName:STAGE_FIELD
})stagePicklistValues({ data, error}){
if(data){
console.log("Stage Picklist", data)
this.pickVals = data.values.map(item => item.value)
console.log('pick',data.values.map(item => item.value))
this.calcKPIs
console.log('OppCountStatus', this.OppCountStatus)
}
if(error){
console.error(error)
}
}
Then I would like to manipulate the data of the first wire based on the second wire so I do:
get calcKPIs() {
if(this.pickVals == null) {
console.log("pickVals here is null")
return
}
if(this.records == null) {
console.log("records here is null")
return
}
console.log("running KPIs")
//full_data = this.records
console.log("KPIdata", this.records)
let map = {};
this.pickVals.forEach(el => {
map[el] = this.records.filter(x => x.StageName == el).length;
});
this.OppCountStatus = map
return this.OppCountStatus;
}
I am calling twice my CalcKPIs function in each of the wire because the two wire are not fully loaded and return undefined.
I feel that this way is not clean but when I console.log my OppCountStatus variable I get the output that I wanted.
However in my UI :
<div class="card_wrapper">
<template for:each={pickVals} for:item="item">
<div class="stageContainer" key={item} style={calcWidth}>
{oppCountStatus.item}
</div>
</template>
</div>
it give me the error.. for the UI oppCountStatus seems to be undefined ... Could you please help me understand and fix thx you very much