CODEWITHSUNDEEP
javascriptangular
Limpep
Limpep

Reputation: 499

Angular 2 map.set is not a function

I am trying to added some values to my map. For example I have the following,

My AddressBook class

export class AddressBook {
  constructor(
    public social: Map<string, string> = new Map<string, string>(),

  ) {
  }
}

here is what the server is returning, 

{
 social: {
 twitter: "twitterId",
 facebook: "facebookId",
 linkedIn: "linkedinId",
 pinterest: "pinterestId"
 }
}

This is my method to add to my social map

this.addressBook.social.set('Google+','GooglePlusId');

But I get the following error 

caused by: this.addressBook.social.set is not a function

Here is how i retrieve the data from the server

 return this.http.get(this.addressBookURL+address_book_id)
      .map(res => <AddressBook> res.json())
      .catch(this.handleError);

this.addressBookService.getAddressBookFromId(address_book_id)
      .subscribe((res) => {
          this.addressBook = res;

        },
        error => {
          console.log(<any>error);
        });

Not sure how to solve this. If anyone can point me the right direction that would be much appreciated. Thanks

Upvotes: 1

Views: 9150

Answers (2)

n00dl3
n00dl3

Reputation: 21584

I guess that you don't pass the right argument to the AddressBook constructor. Actually I guess you are doing this:

let addressBook= new AdresseBook({
 twitter: "twitterId",
 facebook: "facebookId",
 linkedIn: "linkedinId",
 pinterest: "pinterestId"
 } as any);

while you should pass a Map Object...

let map = new Map();
let obj = {
  twitter: "twitterId",
  facebook: "facebookId",
  linkedIn: "linkedinId",
  pinterest: "pinterestId"
};
Object.keys(obj).forEach(key => {
  map.set(key, obj[key]);
});
let addressBook = new AdresseBook(map);

Edit: and I'm right (I'm always right), you cannot expect a plain object to be a Map :

 return this.http.get(this.addressBookURL+address_book_id)
      .map(res => <AddressBook> res.json()) //here you are just telling the compiler
                                            // that resp.json() is an AdresseBook, but 
                                            // it's not right, it's a plain Object
      .catch(this.handleError);

This should work :

 return this.http.get(this.addressBookURL+address_book_id)
      .map(res => {
        let map = new Map();
        let social = res.json().social;
        Object.keys(social).forEach(key => {
          map.set(key, social[key]);
        });
        return new AdresseBook(map);
      })
      .catch(this.handleError);

Upvotes: 4

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37403

try to install @types/core-js module it contains typescript definitions for all es6 features (Map, Set ...) :

npm install @types/core-js --save


you may need to uninstall @types/es6-promise

Upvotes: 2

Related Questions