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:

        @wire(OpportunitiesFromMarket, { MarketId: '$selectedMarket' , countryCheckBox: '$countryCheckBox', selectedCountry:'$selectedCountry'})
            const { data, error } = wireResult;
            this._wiredOppData = wireResult;
                console.log("OppData", data)
                this.records = data
            if(error) {

Then I have another wire to call a list of status for a specific object:

@wire(getPicklistValues, {
    })stagePicklistValues({ data, error}){
            console.log("Stage Picklist", data)
            this.pickVals = data.values.map(item => item.value)
            console.log('pick',data.values.map(item => item.value))
            console.log('OppCountStatus', this.OppCountStatus)

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")

      if(this.records == null) {
        console.log("records here is null")

      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}>

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

1 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)) {
  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}

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

  • thx you worked perfectly. adapted the {item.count} to {item.count.length} to fit what I ws looking for but working perfect thx you very much
    – Ben2pop
    Apr 26, 2021 at 11:50
  • @Ben2pop Ah, I'd forgotten the .length after the .filter() call. Either way suffices, though. Glad I was able to help!
    – sfdcfox
    Apr 26, 2021 at 11:54

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.