CODEWITHSUNDEEP
angulartypescriptrxjsangular9
NeedHelp101
NeedHelp101

Reputation: 639

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

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?

Upvotes: 0

Views: 3853

Answers (2)

Naren Murali
Naren Murali

Reputation: 56670

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

Upvotes: 0

iamhuynq
iamhuynq

Reputation: 5529

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)

Upvotes: 0

Related Questions