Angular2 json object with child array returning error

Question

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;
}

also post, what `this.authService.authJsonHeaders() ` returns ? — anoop, Sep 14 '17 at 04:44
"if I return the characters within the company it errors out" can you add how you try to do this? — eko, Sep 14 '17 at 04:52
In my API endpoint I can either attach the character data to the company or not. If I leave the character data out the response binds to the Company model as expected. If I attach the character data I get the errors I'm posting about. — Alex Boutin Flegel, Sep 14 '17 at 04:55

score 1 · Accepted Answer · answered Sep 14 '17 at 05:13

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.

Angular2 json object with child array returning error

1 Answers1