How to map array to new single object in Angular 8?

Question

I'm doing this:

const rawValues = this.filterList.map(s => {
     return {[s.filterLabel]: s.selectedOption}
  });

filterList variable has this type:

export interface SelectFilter {
  filterLabel: string;
  options: Observable<any>;
  selectedOption: string;
}

now rawValues is being mapped like this:

[
{filterLabel: selectedOption},
{filterLabel: selectedOption},
{filterLabel: selectedOption}
]

so it's an array of my new objects,

but what I want is a SINGLE object, so the end result should be:

{
filterLabel: selectedOption,
filterLabel: selectedOption,
filterLabel: selectedOption
}

NOTE that "filterLabel" will always be unique.

What do I need to change in the map() ?

Heinrich Don Z. Abad · Accepted Answer · 2020-12-14 13:28:53Z

2

For this use case, a map isn't needed as it would result in creating a new array which is unnecessary. Just iterate over each element in the array then assign each filterLabel as a new key to the obj like this:

const obj = {};
this.filterList.forEach(s => {
  obj[s.filterLabel] = s.selectedOption;
});

console.log(obj);

edited Dec 14, 2020 at 13:28

answered Dec 14, 2020 at 12:44

Heinrich Don Z. Abad

1963 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

AJ- Over a year ago

this indeed outputs exactly what I need....I really thought I had to use a Map() for some reason...thank you

cl3m3c7 Over a year ago

const is a bad idea in this case! use var or let

AJ- Over a year ago

@i-HmD what do you suggest?

Heinrich Don Z. Abad Over a year ago

const wouldn't restrict adding a new key to the object :P

cl3m3c7 Over a year ago

@AJ989 let or var

|

Dariusz Ostolski · Accepted Answer · 2020-12-15 08:35:38Z

1

I think this is use case for array reduce:

let result =
[{filterLabel: 'label1', selectedOption: 'option1'}, {filterLabel: 'label2', selectedOption: 'option2'}, {filterLabel: 'label3', selectedOption: 'option3'}, {filterLabel: 'label4', selectedOption: 'option4'} ]
.reduce(function(previousValue, currentValue, index, array) {
  return { 
    [currentValue.filterLabel]: currentValue.selectedOption,
    ...previousValue }
}, {});
console.log(result);

More details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

edited Dec 15, 2020 at 8:35

answered Dec 14, 2020 at 13:00

Dariusz Ostolski

4723 silver badges10 bronze badges

Comments

JeffryHouser · Accepted Answer · 2020-12-14 12:46:33Z

0

You shouldn't do anything to get the result you want. First, when you run a map on the array, a new array is returned. To change that you would have to re-write the map function with your own. Technically possible, but not recommended.

Second, you cannot have multiple properties on an object that have the exact same name. I know of no way around this.

You might be able to do something like what you want with a loop:

let rawValues = {};
for (i = 0; i < filterList.length; i++) { 
  rawValues[`${filterList[i].filterLabel}${i}`] =  filterList[i].selectedOption;
}

Which should give you something like this:

{
   filterLabel1: selectedOption,
   filterLabel2: selectedOption,
   filterLabel3: selectedOption
}

Can you guarantee that the filterLabel will always be unique?

answered Dec 14, 2020 at 12:46

JeffryHouser

39.4k4 gold badges41 silver badges60 bronze badges

3 Comments

AJ- Over a year ago

you probably missed some details, first of all, I specified that the object name would be UNIQUE, I used the same just for the sake of the example

AJ- Over a year ago

the user below offered a working solution, similiar to yours, it's all about using a ForEach instead!

JeffryHouser Over a year ago

My bad; I missed the unique disclaimer. I got stuck up on the invalid object. A For loop should do what you need it to do.

cl3m3c7 · Accepted Answer · 2020-12-14 15:39:17Z

0

var result = {};
this.filterList.forEach(s => {
  result[s.filterLabel] = s.selectedOption;
});

you can use reduce to achieve the same result:

var result = this.filterList.reduce((prev, next) => {
  return {...prev, [next.filterLabel]:next.selectedOption}
}, {});

edited Dec 14, 2020 at 15:39

answered Dec 14, 2020 at 12:47

cl3m3c7

1416 bronze badges

Collectives™ on Stack Overflow

How to map array to new single object in Angular 8?

4 Answers 4

10 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related