1

I am returning a list of records from Apex (say list of Account object records). There is a text field (CustomTextField__c) on Account object which is in the list returned and needs to displayed as a combobox.

What I have tried so far -

//returned the list using wire service and constructed an array so that it can be displayed as options over combobox -

    @track customOptions;

    @wire ({data,error}){
    for(var key in data){
    options.push({
    label:data[key].field__c, value: data[key].field__c;
    });
   this.customOptions = options;

//this will have the array however with duplicates as it is picking the value from every record.

//tried using the map function of JS as given in various other examples however its not working-

// in LWC component

<lightning-combobox value={value} options={customOptions}/>

P.S- we do not want to construct the set from Apex and pass it to the component.

1
  • What have you tried so far to remove duplicates? Please edit your question with more details about what you've tried, and what part of it isn't working. There's many examples of how to remove duplicates from an array on stackexchange, so it's unclear what part of it you're struggling with.
    – Nick C
    Jan 13, 2023 at 5:04

2 Answers 2

0

Since you are returning the list of object record which contains duplicates values for some particular field.

I replicated your issue with this:-

var arr = [
    { id: 1, field__c: "apple" },
    { id: 2, field__c: "Orange" },
    { id: 3, field__c: "apple" },
    { id: 4, field__c: "apple" },
];
const uniqueArray = arr.filter((value, index) => {
    const _value = JSON.stringify(value.field__c);
    return (
        index ===
        arr.findIndex((obj) => {
            return JSON.stringify(obj.field__c) === _value;
        })
    );
});

I took this solution from here:- How to remove all duplicates from an array of objects? , there are many good solutions available there. You can pick any of them.

Basically, It looks for unique value of your array property "field__c" and remove deupliactes. You can construct your option after removing the duplicates.

enter image description here

1
  • Thanks Sanket Kumar, the approach worked. I have updated my question for better explanation of the requirement.
    – user126869
    Jan 16, 2023 at 22:44
2

EDIT

Based on your changed question, this is still easily able to be done in 2 lines (actually 1, but it would be too hard read):

@wire(yourMethod)
yourMethodHandler({ error, data }) {
  let deduped = [...new Set(accounts.map(account => account.CustomTextField__c))];
  return objectarray = deduped.map( option => {return {'label':option,'value':option}});
}

EARLIER ANSWER BASED ON DIFFERENT PROVIDED DATA STRUCTURE

Try something like this:

@wire(yourMethod)
yourMethodHandler({ error, data }) {
  this.options = [...new Set(data)].map( option => {return {'label':option,'value':option}});
}

Also, you can use a set - as long as you turn it into an array at the end.

If you want to use a getter, you can do it this way:

@wire(apexMethodName, { apexMethodParams })
rawOptions;

get options(){
  return [...new Set(this.rawOptions)].map( option => return {{'label':option,'value':option}});
}

This all depends on the data returning in this format:

['A','B','C','A','A']

Just to explain the line of code - we construct a set from the array, which dedupes it. Then, we spread it int a new array and then we map each member into a new array filled with objects containing label and value

1
  • I see you changed the question significantly. You need to take the care to ask the question correctly the first time, because otherwise you are wasting peoples valuable time. Jan 16, 2023 at 23:33

You must log in to answer this question.

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