Distinct Values using Set

Question

I have been using

      <FormGroup>
        <Campaign
          campaignName={this.campaignName.bind(this)}
          campaignOptions={[...new Set(this.props.records.map(options => options.campaign))]}/>
      </FormGroup>

to get a unique array for a dropdown option, however I now need to pass an array with each object in it having a label and a value.

I have refactored the code as follows,

   <FormGroup>
        <Campaign
          campaignName={this.campaignName.bind(this)}
          campaignOptions={[...new Set(this.props.records.map(options => {
            return {value: options.campaign, label: options.campaign };
          }))]}/>
      </FormGroup>

...but the unique element is now not working (see below with duplicates). What am I doing wrong please?

The input array looks like...

    [
    1. 0:{_id: "zWTiLEjqrCKdxTvze", owner: "K7xTxu7PRDCuhFZRC", company_ID: "1", campaign: "newevent", …}
    2. 1:{_id: "SkZzDMAWokFFYEycp", owner: "K7xTxu7PRDCuhFZRC", company_ID: "1", campaign: "instagramlaunch", …}
    3. 2:{_id: "p4pychanC5Zw8iWAQ", owner: "K7xTxu7PRDCuhFZRC", company_ID: "1", campaign: "stuffinhere", …}
       … more in here including more than 1 object with instagram launch for example
    ]

Original approach resulted in Array of...

    0:"newevent"
    1:"sheffieldevent"
    2:"stuffinhere"
    3:”instagramlaunch"
    4:”anothertest"
    5:”yetanother"

now results in...

    0:{value: "newevent", label: "newevent"}
    1:{value: "sheffieldevent", label: "sheffieldevent"}
    2:{value: "stuffinhere", label: "stuffinhere"}
    3:{value: "instagramlaunch", label: "instagramlaunch"}
    4:{value: "instagramlaunch", label: "instagramlaunch"}
    5:{value: "instagramlaunch", label: "instagramlaunch”}
    6:{value: "anothertest", label: "anothertest”}
    7:{value: "yetanother", label: "yetanother"}

@Adelin I have amended the initial question to reflect the problem... now have duplicates — Nick Wild, Dec 04 '17 at 09:06
Possible duplicate of [How to customize object equality for JavaScript Set](https://stackoverflow.com/questions/29759480/how-to-customize-object-equality-for-javascript-set) — jannis, Dec 04 '17 at 09:18
What templating language are you using. Add that to the tags. — bhspencer, Dec 04 '17 at 16:25

Nina Scholz · Answer 1 · 2017-12-04T09:34:07.670

0

new Set(this.props.records.map(options => {
    return {value: options.campaign, label: options.campaign };
}))

Does not work, because every new object is a unique object and Set works with all types. As result, you get all options, but not unique options.

If you have the same pattern as you want, you could render the set after collecting all values and build a new objects array out of the set.

var optionsSet = new Set(array.map(option => option.campaign)),
    options = Array.from(optionsSet, v => ({ value: v, label: v }));

edited Dec 04 '17 at 09:34

answered Dec 04 '17 at 08:59

Nina Scholz

376,160
25
347
392

Great thanks for your quick work Nina Scholtz. I am getting a "optionsSet is not defined" error – Nick Wild Dec 04 '17 at 09:14

score 0 · Accepted Answer · answered Dec 05 '17 at 23:42

0

I resolved this using lodash...

    campaignOptions={_.uniqBy(this.props.records.map((options,index) => {return { value: index, label: options.campaign }}),'label')}/>

answered Dec 05 '17 at 23:42

Nick Wild

525
1
11
22

Distinct Values using Set

2 Answers2