json 2打字稿映射给出类型错误

Question

Okej so Im trying to map a list of .Net objects to my Angular frontend by way of Web Api 2. The objects are sent, I get them, but depending on the circumstances the objects and their properties might be an Employment reference, Assignment reference or an Assignment organization unit reference.

Here is an image of how the list of objects can look, with one AssignmentHolder that can be one of those three classes and a list of DependentEntities that can be one of those three classes. Here is how they look in my Angular app:

This is the object containing them:

@JsonObject('AssignmentListItem')
export class AssignmentListItem {
@JsonProperty('AssignmentHolder')
AssignmentHolder: any = undefined;

@JsonProperty('DependentEntities')
DependentEntities: any = undefined;

@JsonProperty('AssignmentRoles', [AssignmentRole])
AssignmentRoles: AssignmentRole[] = undefined;

@JsonProperty('NumberOfDependentEntities', Number)
NumberOfDependentEntities: Number = undefined;

@JsonProperty('IsInherited', Boolean)
IsInherited: boolean = undefined;
}

These are the classes.

@JsonObject('ReferenceBase')
export class ReferenceBase {

@JsonProperty('OrganizationRegistrationNumber', OrganizationRegistrationNumber)
OrganizationRegistrationNumber: OrganizationRegistrationNumber = undefined;

@JsonProperty('IsIncomplete', Boolean)
IsIncomplete: Boolean = undefined;

@JsonProperty('SortingName', String)
SortingName: string = undefined;
}

-------

@JsonObject('EmploymentReference')
export class EmploymentReference extends ReferenceBase {

@JsonProperty('NationalCivicRegistrationNumber', String)
NationalCivicRegistrationNumber: NationalCivicRegistrationNumber = undefined;

@JsonProperty('GivenName', String)
GivenName: string = undefined;

@JsonProperty('Surname', String)
Surname: string = undefined;

@JsonProperty('FullName', String)
FullName: string = undefined;

constructor() {
    super();
    this.FullName = (this.GivenName + ' ' + this.Surname);
    this.SortingName = this.FullName;
}
}

-----
@JsonObject('AssignmentReference')
export class AssignmentReference extends ReferenceBase {

@JsonProperty('AssignmentRoles', [AssignmentRole])
AssignmentRoles: AssignmentRole[] = undefined;

@JsonProperty('OrganizationName', String)
OrganizationName: string = undefined;

@JsonProperty('NationalCivicRegistrationNumber', NationalCivicRegistrationNumber)
NationalCivicRegistrationNumber: NationalCivicRegistrationNumber = undefined;

@JsonProperty('Surname', String)
Surname: string = undefined;

@JsonProperty('FullName', String)
FullName: string = undefined;

@JsonProperty('GivenName', String)
GivenName: string = undefined;
}

------

@JsonObject('AssignmentOrganizationalUnitReference')
export class AssignmentOrganizationalUnitReference extends ReferenceBase {

@JsonProperty('OrganizationName', String)
OrganizationName: string = undefined;

@JsonProperty('Name', String)
Name: string = undefined;

@JsonProperty('Active', Boolean)
Active: Boolean = undefined;

@JsonProperty('IncludeSubUnits', Boolean)
IncludeSubUnits: Boolean = undefined;

@JsonProperty('AssignmentRoles', [AssignmentRole])
AssignmentRoles: AssignmentRole[] = undefined;

@JsonProperty('UnitId', String)
UnitId: string = undefined;

@JsonProperty('Type', OrganizationalUnitReferenceType)
Type: OrganizationalUnitReferenceType = undefined;
}

So those are the objects I want to map too depending on what Is in the assignmentlist I get back

This is my custom DTO so that I can use a custom converter:

@JsonObject('AssignmentsDto')
export class AssignmentsDto {

@JsonProperty('AssignmentList', ObjectConverter)
AssignmentList: AssignmentListItem[] = undefined;
}

this is my JsonCustomConverter

@JsonConverter
export class ObjectConverter implements JsonCustomConvert<AssignmentListItem[]> {

// We receive the instance and just serialize it with the standard json2typescript method.
serialize(assignmentListItems: AssignmentListItem[]): any {
    const jsonConvert = new JsonConvert();
    return jsonConvert.serialize(assignmentListItems);
}

// We receive a json object (not string) and decide
// based on the given properties whether we want to
// create an instance of AssignmentReference or AssignmentOrgUnitReference.
deserialize(assignmentListItems: any): AssignmentListItem[] {

    const jsonConvert = new JsonConvert();

    let assignments = new Array<AssignmentListItem>();

    //Map the Holder entity.
    for (let assignment of assignmentListItems) {
        if (assignment.AssignmentHolder['__type'] === 'something.something.Web.Models.EmploymentReference' ||
            assignment.AssignmentHolder['__type'] === 'something.something.Web.Models.AssignmentEmploymentReference') {

            let tempAssignment: AssignmentListItem = jsonConvert.deserialize(assignment.AssignmentHolder, EmploymentReference);

            //For every assignment there is a list of Dependents. Here we map those.
            for (let dependent of assignment.DependentEntities) {
                if (dependent['__type'] === 'something.something.Web.Models.EmploymentReference' ||
                    dependent['__type'] === 'something.something.Web.Models.AssignmentEmploymentReference') {

                    let tempDependent: EmploymentReference = jsonConvert.deserialize(dependent, EmploymentReference);
                    tempAssignment.DependentEntities.push(tempDependent);

                } else if (dependent['__type'] === 'something.something.Web.Models.AssignmentOrganizationalUnitReference') {

                    let tempDependent: AssignmentOrganizationalUnitReference = jsonConvert.deserialize(dependent, AssignmentOrganizationalUnitReference);
                    tempAssignment.DependentEntities.push(tempDependent);
                }
            }

            assignments.push(tempAssignment);

        } else if (assignment.AssignmentHolder['__type'] === 'something.something.Web.Models.AssignmentOrganizationalUnitReference') {

            let tempAssignment: AssignmentListItem = jsonConvert.deserialize(assignment.AssignmentHolder, AssignmentOrganizationalUnitReference);

            //For every assignment there is a list of Dependents. Here we map those.
            for (let dependent of assignment.DependentEntities) {
                if (dependent['__type'] === 'something.something.Web.Models.EmploymentReference' ||
                    dependent['__type'] === 'something.something.Web.Models.AssignmentEmploymentReference') {

                    let tempDependent: EmploymentReference = jsonConvert.deserialize(dependent, EmploymentReference);
                    tempAssignment.DependentEntities.push(tempDependent);

                } else if (dependent['__type'] === 'something.something.Web.Models.AssignmentOrganizationalUnitReference') {

                    let tempDependent: AssignmentOrganizationalUnitReference = jsonConvert.deserialize(dependent, AssignmentOrganizationalUnitReference);
                    tempAssignment.DependentEntities.push(tempDependent);
                }
            }
            assignments.push(tempAssignment);
        }
    }
    console.log('return ', assignments);
    return assignments;
}
}

And finally, this is the Assignment Api Service where i use the converter.

    // GET LIST OF ASSIGNMENTS
getAssignmentList(
    filterStr: string,
    orgNoParam: string,
    skip: number,
    take: number
): Observable<any> {

    // set headers
    let head = new HttpHeaders();
    head = head.append('Content-Type', 'application/json'); 
    // set binds to model reciever
    const data = {
        'orgNoParam': orgNoParam,
        'filterStr': filterStr,

    };
    let body = JSON.stringify(data);

    // set query parameters
    let url = this.assignmentListUrl + '?skip=' + skip + '&take=' + take;

    return this.http.post<any>(url, body, { headers: head })
        .map(this.convertData)
        .catch(this.handleError);
}

private convertData(res: Response) {

    let jsonConvert = new JsonConvert();
    jsonConvert.valueCheckingMode = ValueCheckingMode.ALLOW_NULL;

    let deSerializedAssignments: AssignmentListItem[] = jsonConvert.deserialize(res, AssignmentsDto).AssignmentList;

    return deSerializedAssignments;

The error I get in console is :

Fatal error in JsonConvert. Failed to map the JSON object to the JavaScript class "AssignmentsDto" because of a type error. Class property: AssignmentList Expected type: undefined JSON property: AssignmentList JSON type: [object, object, object, object, object]

Answer 1

I solved this by making sure every single property from the json object was being mapped to the typescript classes and in AssignmentsDto I added a second The object property as well as the converter, like so:

@JsonProperty('AssignmentList',[AssignmentListItem], ObjectConverter) AssignmentList: AssignmentListItem[] = undefined;

Hope this helps someone!