Search code examples
angularasp.net-apicontroller

Angular2 json object with child array returning error


I'm running Angular2 v4.4.0beta. I'm trying to return an object and it's children from my api. The endpoint is called and here is the json:

{
    "companyId":3,
    "name":"Third",
    "description":null,
    "characters":[{
       "characterId":3,
       "name":"Third",
       "description":null,
       "status":null,
       "companyId":3,
       "userId":null
    }]
}

Here is Company.ts

import { Component } from '@angular/core';
import { Character } from './Character';

export class Company {
    companyId: number;
    name: string;
    description: number;
    characters: Character[];
}

And Character.ts

import { Component } from '@angular/core';

export class Character {
    characterId: number;
    name: string;
    description: string;
    status: number;
    userId: string;
    companyId: number;
}

This is my Get function in the component

getCompany(id: number) {
        this.companyService.getCompany(id)
            .subscribe(
            (data: Company) => this.company = data,
            error => this.errorMessage = <any>error);
    }

And finally this is the service function

getCompany(id: number): Observable<Company> {
        return this.http.get(this.url + "/Get/" + id, 
            { headers: this.authService.authJsonHeaders() })
            .map((resp: Response) => resp.json() as Company)
            .catch(this.handleError);
    }

If I fetch the items separately both models work but if I return the characters within the company it errors out.

Chrome debugger shows this error

Failed to load resource: net::ERR_CONNECTION_RESET

And the component logs this error

0 - {"isTrusted":true}

What am I missing?

Edit: The authHeader is inserting a JWT into the call

authJsonHeaders() {
        let header = new Headers();
        header.append('Content-Type', 'application/json');
        header.append('Accept', 'application/json');
        header.append('Authorization', 'Bearer ' + 
            sessionStorage.getItem('bearer_token'));
    return header;
}

Solution

  • Okay,

    Apparently the issue was in the serializer. It was errored out serializing the children but managed to return valid json anyway.

    I tossed [JsonIgnore] tags on more connecting elements to properly prevent circular references and the error went away.