Uncaught (in promise) TypeError: Cannot read property 'item' of undefined; Asynchronous APEX calls

Question

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

Answer 1

You can't use maps the way that you're trying to use them. The for:each directive only supports lists, and you can't dynamically access map keys in LWCs, only static keys.

Your first problem is that you're not "waiting" for oppCountStatus to be populated:

 <div class="card_wrapper" is:true={oppCountStatus}>

In addition, {oppCountStatus.item} won't dynamically access the map the way you think it will. You need to convert your data into a list (formally, an Array) in order to display the data.

calcKPIs() {
  if(!(this.records || this.pickVals)) {
    return;
  }
  this.oppCountStatus = this.pickVals.map(
    label => ({ label, count: this.records.filter(x => x.StageName == label)})
  );

Which would make your template look more like:

    <div class="card_wrapper" is:true={oppCountStatus}> 
        <template for:each={oppCountStatus} for:item="item">
            <div class="stageContainer" key={item.label} style={calcWidth}>
            {item.label}: {item.count}
            </div>
        </template>
    </div>

Also, I noted that you used both OppCountStatus and oppCountStatus. Be careful when writing LWCs, as everything is cAsE-sEnSiTiVe.