AngularFire2: Create document and set an array of maps

Question

Requested behaviour:
I would like to create an AngularService which adds a document to Firestore with two fields. The first field is a map which is filled with user data. The second field is an array of maps. It should receive the map from the first field as the first item.

Current State
The function creates and fills the document successfully if I only add the map (first field) and comment out the array of maps(second field).

issue
If I add code for setting the array, the function does not work anymore. I receive the following error even both fields are called with the same data:

FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field groupExecutiveBoard)

How can I fix that? How can I create the array of maps and push the first map to it?

My Model:

export interface Group {

    groupLeader?: {
        groupLeaderID?: string;
        groupLeaderName?: string;
        groupLeaderImage?: string;
    };
    
    //array
    groupExecutiveBoard?: {
        boardMemberID?: string;
        boardMemberName?: string;
        boardMemberImage?: string;
    }[];
    
}

My Service

constructor(private angularFirestore: AngularFirestore) { }

addGroup(author: User) {
  const groupsCollection = this.angularFirestore.collection<GroupID>('groups');

  groupsCollection.add({

    // sets groupleader if "GroupExecutiveBoard" is commented out
    groupLeader: {
      groupLeaderID: author.uid,
      groupLeaderName: author.displayName,
      groupLeaderImage: author.profilePhoto
    },

    //should set user data as first array item. Does not work
    groupExecutiveBoard: {
      boardMemberId: author.uid,
      boardMemberName: author.displayName,
      boardMemberImage: author.profilePhoto
    }[0],

  });
}

Constantin Beer · Accepted Answer · 2019-03-17 15:50:03Z

1

Try this out:

groupLeader: {
      groupLeaderID: author.uid,
      groupLeaderName: author.displayName,
      groupLeaderImage: author.profilePhoto
    },
groupExecutiveBoard: [{
      boardMemberId: author.uid,
      boardMemberName: author.displayName,
      boardMemberImage: author.profilePhoto
}],

edited Mar 17, 2019 at 15:50

answered Mar 17, 2019 at 14:05

Constantin Beer

5,9136 gold badges31 silver badges48 bronze badges

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

6 Comments

tobias hassebrock Over a year ago

Unfortunately, that does not work. I get multiple ts lints then - including The expected type comes from property 'groupExecutiveBoard' which is declared here on type 'GroupID'. As far as I know, this means. that I can not assign you approach to an object[] array type

Constantin Beer Over a year ago

I updated my answer. Try to change the curley braces with the square brackets

tobias hassebrock Over a year ago

I am so sorry. I think your first solution was correct. I made a typo in my post description here (in my code the last letter of boardMemberID is a capital "D", here it is a "d") and then copy pasted your solution to my code. Can you bring up your first solution again? Then I could mark it as solved :) Thanks for your help already!

Constantin Beer Over a year ago

But did you tried the update? Because that creates a map in an array. Wasn't that what you tried to do or is it fine for you with strings?

Constantin Beer Over a year ago

Ok, know I got what you mean :) I changed to my first solution again.

|

Collectives™ on Stack Overflow

AngularFire2: Create document and set an array of maps

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related