Typescript Angular failed to serialize the object

Issue

I am getting a failed to serialize the object not sure what I am doing wrong any help would be great.

Object {isSuccess: false, error: "The 'ObjectContent`1' type failed to serialize the…", status: 500}

  this.agentManager.getStyleGuideByAgentId(this.model.Id)
            .then(response => {
                if (response.isSuccess) {
                    var countKey = Object.keys(response.responseObject).length;
                    this.styleguideNotes.count = countKey;
                    this.styleguideNotes.agentNotes = response.responseObject;
                    console.log(this.styleguideNotes.agentNotes);
                }
                else {
                    console.log("Failed to complete the operation. Please contact administrator for assistance");
                }
            });

AgentManager

 getStyleGuideByAgentId(Id: number): Promise<ServiceResponse<any>>{
       var request = this.agentsService.getStyleGuideByAgentId(Id);
       var d = this.serviceResponseWrapper.wrapResponse<StyleGuideNoteModel>(request);
       return d;
}

AgentsService

getStyleGuideByAgentId(Id: number): Promise<Response> {
    var result = this.http.post(this.apiUrls.GetStyleGuideNotes, JSON.stringify(Id), { headers: ServiceBase.headers }).toPromise();
    return result;
}

Controller

[HttpPost]
public IHttpActionResult GetStyleGuideNoteById([FromBody]long agentId)
{
    var dbResult = StyleGuideNotesDataService.GetStyleGuideNoteById(agentId);

    var styleguideNote = dbResult
        .Select(x => new
        {
            Section = x.Section,
            AgentType = x.AgentType,
            Status = x.Status.Name,
        })
        .Distinct()
        .ToList();

    var groupedstyleguideNotes = styleguideNote
        .GroupBy(item => item.Status)
        .OrderBy(group => group.Key)
        .Select(group => new
        {
            Count = group.Key.Count(),
            Status = group.Key,
            StyleGuideNote = group.ToList()
        })
        .ToList();

    var result = Ok(new
    {
        Count = groupedstyleguideNotes.Count,
        Status = groupedstyleguideNotes,
        StyleGuideNotes = groupedstyleguideNotes.ToList()
    });

    return Ok(result);
}

Solution

Try this:

AgentManager:

async getStyleGuideByAgentId(Id: number): Promise<ServiceResponse<any>>{
       var request = await this.agentsService.getStyleGuideByAgentId(Id);
       var d = this.serviceResponseWrapper.wrapResponse<StyleGuideNoteModel>(request);
       return d;
}

AgentsService:

getStyleGuideByAgentId(Id: number): Promise<Response> {
    var result = this.http.post(this.apiUrls.GetStyleGuideNotes, Id.toString(), { headers: ServiceBase.headers }).toPromise();
    return result;
}

If you do these changes and still have 500 error, as @S.Hashiba said, you have a problem in your back.

Answered By - Juan Vicente Berzosa Tejero