Angular5 - Error: Function DocumentReference.set() called with invalid data. Data must be an object, but it was: a custom PlatformModel object

Question

I find allready some posts on google where people solve this problem. but i cant reproduce the solutions on my project.

My Interface:

declare module PlatformInterface {

    export interface Design {
        primaryColor: string;
        backgroundImage: string;
    }

    export interface Saga {
        id: string;
        name: string;
        short_desc: string;
        desc: string;
        manga: Manga[];
        anime: Anime[];
    }

    export interface Root {
        id: string;
        name: string;
        design: Design[];
        saga: Saga[];
    }

}

My Model:

export class PlatformModel implements PlatformInterface.Root {
    id: string;
    name: string;
    design = [];
    saga = [];

    constructor(obj?: any) {
        this.id = obj.name.toLowerCase().replace(' ', '-');
        this.name = obj.name;
        this.design = obj.design;
        this.saga = obj.saga;
    }
}

My Service:

@Injectable()
export class PlatformService {

    public list$: Observable<PlatformModel[]>;

    private _platform: AngularFirestoreCollection<PlatformModel>;

    constructor(db: AngularFirestore) {
        this._platform = db.collection<PlatformModel>('platforms');
        this.list$ = this._platform.valueChanges();
    }

    /** Get Platform by id */
    get(id: string): Observable<PlatformModel> {
        return this._platform.doc<PlatformModel>(id).valueChanges();
    }

    /** Add / Update Platform */
    set(id: string, platforms: PlatformModel) {
        return fromPromise(this._platform.doc(id).set(platforms));
    }

    /** Remove Platform */
    remove(id: string) {
        return fromPromise(this._platform.doc(id).delete());
    }

}

My function in Component.ts

constructor(public _platformService: PlatformService) {
}

addPlatform(name: string) {
    if (name !== '') {
        const platform = new PlatformModel({
            name: name,
            design: [],
            saga: []
        });

        this._platformService.set(platform.id, platform).subscribe();
    }
}

The Angular Compiler dont Throw any error, But when i try to fire the addPlatform Function i get in Browser this error:

ERROR Error: Function DocumentReference.set() called with invalid data. Data must be an object, but it was: a custom PlatformModel object

The Errors Says that the Data must be an object, but it is allready an object or not? i mean i define in the service it with:

public list$: Observable<PlatformModel[]>;

[] Makes it to an object or not?

Architech · Accepted Answer · 2018-05-14 08:59:42Z

2

I've found some clarification here Firestore: Add Custom Object to db

while firebase could send the data inside your object to the database, when the data comss back it cannot instantiate it back into an instance of your class. Therefore classes are disallowed

my workaround for custom class was

 this.db.collection(`${this.basePath}/`).doc(custom_class.$key)
.set(Object.assign({}, JSON.parse(JSON.stringify(custom_class))))
.then( ret => {
  log.debug('file added', ret);
}).catch( err => {
  log.error(err);
});

so I guess in your case it would be

    /** Add / Update Platform */
set(id: string, platforms: PlatformModel) {
    return fromPromise(this._platform.doc(id).set(Object.assign({},JSON.parse(JSON.stringify(platforms))));
}

answered May 14, 2018 at 8:59

Architech

212 bronze badges

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

1 Comment

bvamos Over a year ago

What if you have a GeoPoint type field in custom_class? Then it will be converted to a map, what is not what you want.

Cerchi · Accepted Answer · 2020-01-12 15:21:56Z

0

For adding a Map into Firestore document you'll have to use:

Object.assign({}, JSON.parse(JSON.stringify(YOUR_MAP)))

answered Jan 12, 2020 at 15:21

Cerchi

291 silver badge1 bronze badge

Collectives™ on Stack Overflow

Angular5 - Error: Function DocumentReference.set() called with invalid data. Data must be an object, but it was: a custom PlatformModel object

2 Answers 2

1 Comment

Object.assign({}, JSON.parse(JSON.stringify(YOUR_MAP)))

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Object.assign({}, JSON.parse(JSON.stringify(YOUR_MAP)))

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related