0

I have an application to teach myself Angular and Firebase. For this app, I want to be able to create a character. To create a character, a character interface is created, with 2 variables. a string and a map. You fill in a name and various numbers in a form. However when i try to add this character to my collection, I get the error mentioned in the title:

Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Map object

Now I have googled a lot about this and tried various methods. I have tried converting the map to objects, to assign it without a .set() and I have read a lot of posts that are not exactly my problem. I still tried some and nothing worked. I have read the firebase documentation but I did not find the info I need. The below code is my form. If I remove every mention of ability scores it just works. The name is no problem. Any help is welcome. I am very stuck.

    <form (ngSubmit)="onSubmit()" >
    <div class="display-column">
        <div class="input-field center-name">
            <input class="space-text center-text" type="text" placeholder="Name" [(ngModel)]="character.name" name="name">
        </div>
        <div>
            <mat-grid-list cols="10" rowHeight="25px">

                <div *ngFor="let ability of ability_scores">
                    <mat-grid-tile [colspan]=5>
                        {{ability.display_name}}
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]=2 >
                        <input 
                        name="ability.display_name" 
                        [ngModel]="character.ability_scores[ability.display_name]" 
                        (ngModelChange)="character.ability_scores.set(ability.value, $event)" 
                        type="number" placeholder={{ability.value}}
                        class="space-text center-text"
                        >
                    </mat-grid-tile>
                </div>
            </mat-grid-list>
        </div>
        <div class="center-text">
            <input type="submit" value="Create" class="btn">
        </div>
    </div>
</form>

This the important bit of my create-character.ts

  character: Character = {
    name: '',
    ability_scores: new Map<string, number>()
  } 

  ability_scores: AbilityScore[] = [
    { display_name: "strength", value: 10, modifier: 0 },
    { display_name: "dexterity", value: 10, modifier: 0 },
    { display_name: "constitution", value: 10, modifier: 0 },
    { display_name: "intelligence", value: 10, modifier: 0 },
    { display_name: "wisdom", value: 10, modifier: 0 },
    { display_name: "charisma", value: 10, modifier: 0 }
  ]

  onSubmit(){
    this.sendData();
  }

  constructor(
    private characterService: CharacterService,
    private appComponent: AppComponent,
    ) {}

  ngOnInit() {
    this.ability_scores.forEach(element => {
      this.character.ability_scores.set(element.display_name, 10);
    })
  }

The character interface:

export interface Character {
    name: string;
    ability_scores: Map<string, number>;
}
R. Richards
  • 24,603
  • 10
  • 64
  • 64
Roeland
  • 11
  • 1
  • 2
  • I think you have string number Map and in line ```(ngModelChange)="character.ability_scores.set(ability.value, $event)"``` you are trying to set number number to your map. – Fateme Fazli Jan 19 '20 at 12:19
  • The resulting map I have so far appears to be correct. I will still doublecheck and test this when home. Thank you – Roeland Jan 19 '20 at 13:03
  • Unfortunately that did not work. The result I get is still [this](https://imgur.com/a/kLQzEwJ) object with the same error below – Roeland Jan 19 '20 at 14:44
  • @FatemeFazli Could you help me further? Do you think converting my map to a JSON object would help? – Roeland Jan 20 '20 at 17:04

0 Answers0