LWC javascript Issue: I am trying to assign salesforce id to the map in javascript

Question

import getCampaignList from '@salesforce/apex/LeadController.getCampaignNames';

   @wire(getCampaignList, {}) campaignLst;  
  get campaignOptions() {
        var returnOptions = [];
        if(this.campaignLst.data){
            this.campaignLst.data.forEach(ele =>{
                returnOptions.push({label:ele.Name , value:ele.Name});
                // alert(ele.id);
               
               // this.map.set(ele.Name, ele.id );//removed in update
ele?.map(({ Name,Id }) => ({ value: Name, label: Id })
                  ); //updated
            }); 
        }
        console.log(JSON.stringify(returnOptions));
        console.log(this.map);
        return returnOptions;
    }
 handleChange(event) {
        if(event.target.name == 'Campaign'){
            this.leadRecord[event.target.name]=map.get(event.target.value); // I need Map[name=> Id] I am very sure there are no duplicate campaign names.
        }else{
            this.leadRecord[event.target.name] = event.target.value;
        }

update:

---

          
       ele?.map(
                    ({ Name,Id }) => ({ value: Name, label: Id })
                  );
    

---

  @AuraEnabled(cacheable=true)
    public static List<Campaign> getCampaignNames(){
        List<Campaign> options = new List<Campaign>();
        try {
           options = [SELECT id, Name FROM Campaign];
}

I am trying to get add name, ID to a map object. but Id prints as undefined in console why? but I do get the Name. Any inputs please?

Answer 1

JavaScript is case-sensitive. That means that, for a record returned from Apex, it's going to be Id, and not id.

Also, if you're going to use imperative programming (e.g. forEach), you should at least use the correct function for the job, map:

get campaignOptions() {
  return this.campaignLst.data?.map(
    ({ Id, Name }) => ({ value: Id, label: Name })
  );
}

Where:

• ?. means "access this property only if it is not null and not undefined"
• (...) => (...) is an arrow function that returns a value
• As a parameter to a function (the left-hand side of our arrow function), { x, y } splits one parameter into its parts, here Id and Name
• On the other side, for the return value, we assign the value and label

Side note: I recommend using the Id for the value to make sure you select the correct record if there are multiple campaigns with the same name. You may want to present additional information to help users disambiguate duplicate names somehow.