Angular 5.2.10-TypeScript 2.4.2属性accesor json映射

Question

I have a problem that I can't seem to find a solution for or maybe my search is wrong. The problem is as follows:

Background

I have an BookingEvent class that is defined as follows:

export class BookingEvent {
    title: string;

    private _startDate: Date;

    set startDate(value: Date) {
        let valueMoment = moment(value);
        if (valueMoment.isValid()) this._startDate = valueMoment.toDate();

    }

    get startDate(): Date {
        return this._startDate;
    }

    private _endDate: Date;

    set endDate(value: Date) {
        let valueMoment = moment(value);
        if (valueMoment.isValid()) this._endDate = valueMoment.toDate();
    }
}

In addition to the above, I have a form component with a template doing two way binding to the properties.

Problem

When I save the form data to a remote api, I realised that the json produced maps my startDate & endDate bound properties as _startDate & _endDate respectively as is evident from:

{
        "title": "My awesome event",
        "_startDate": "2018-04-26T20:50:00.000Z",
        "_endDate": "2018-04-27T19:50:00.000Z"
    }

Question

Why is the native json mapper using the private property names as opposed to the public ones? How can I ensure that the public property name are used?

Answer 1

You can specify a toJSON() method to customize what the object looks like when it is serialized using JSON.stringify(...) . That link details exactly how it figures out what to include in the object being serialized. JavaScript doesn't have the concept of private properties, so they are just properties like anything else.

class BookingEvent {
    // all the rest of your code

    toJSON() {
        return {
            title: this.title,
            startDate: this.startDate,
            endDate: this.endDate
        }
    }
}