Add additiontal values to Map value (key, value) object from RxJs observable call

2 answers

I'm trying to add data to a map api call. I use RxJS to create an observable and want to add this data before subscribing. Even though I can do it after, that means I'll need to subscribe to the data, which is different from how I do the rest of my service providers.

I have an API call, 'site.com/api' with a map data type. For brevity, I'll reduce the data to what matters. It returns a format like Map, see below

interface input {   name: string;   month: string;   season?: string }  data = {   '2020-01-01': {     name: 'test';     month: 'Jan';   },   '2020-01-02': {     name: 'hi';     month: 'Feb';   } } 

What I want is know is how to map this to add a season. Right now, my code sorta works, but instead of adding a season to each individual map element, it creates a new element entirely.

const req = this.http.get<any>('site.com/api')       .pipe(         map((data) => {           // Get data keys and associated data key to be all it's current values and add season           const transformedData = Object.keys(data).map(key => data[key] = {             ...data,             season: 'Summer'           });            return transformedData;         }),        ); 

Eg

{ 0: [     '2020-01-01': {...},     '2020-01-02': {...},     'season': 'Summer'   ] 1: [   '2020-01-01': {...},   '2020-01-02': {...},   'season': 'Summer'   ] } 

Which is strange because I thought maps go through each element once, so that code would go through, get the first element's keys and then modify it's value.

Some online answers use pluck to modify map key values, but that implies you know what the key is. My map keys are dynamic and the dates will change, so I can't use that approach. Other examples online aren't map , just an array.

EDIT

Intended results

{   '2020-01-01': {     name: 'test';     month: 'Jan';     season: 'Summer';   },   '2020-01-02': {     name: 'hi';     month: 'Feb';     season: 'Summer';   } } 

EDIT I've simply adjusted my other functions to use an array of objects instead of a map . Can someone close this question?

All answers to this question, which has the identifier 60843628

The best answer:

You can use reduce

const data = {    '2020-01-01': {      name: 'test',      month: 'Jan',    },    '2020-01-02': {      name: 'hi',      month: 'Feb',    }  }  const transformedData = Object.keys(data).reduce((acc, curr) => {    return {      ...acc,      [curr]: {         ...data[curr],         season: 'Summer',      },    };  }, {});  console.log(transformedData)

or for...in loop

const data = {    '2020-01-01': {      name: 'test',      month: 'Jan',    },    '2020-01-02': {      name: 'hi',      month: 'Feb',    }  }  let transformedData = {};  for(const item in data){    transformedData[item] = {      ...data[item],      season: 'Summer',    }  }  console.log(transformedData)

This is one way to write it, we can simply apply this extra property to each of the elements using Object.assign. Below is a working example!

var data = {   '2020-01-01': {     name: 'test',     month: 'Jan',   },   '2020-01-02': {     name: 'hi',     month: 'Feb',   } } const req = of(data)       .pipe(         map((data) => {           // Get data keys and associated data key to be all it's current values and add season           const transformedData = Object.keys(data).map(key => Object.assign(data[key], {season: 'Summer'}));            return transformedData;         }),        ).subscribe((output) => console.log(output)); 

Stackblitz example

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data