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

You must log in to answer this question.

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