Circular Reference - AngularJS/EF/WebAPI - angularjs

Question

I'm using AngularJS, EF and WebAPI. I have a one to many relationship between ObjectA and ObjectB.
In the UI, I want to loop through a list of ObjectA and do something like:
<table>
<tr ng-repeat="objectA in objectAs">
<td>objectA.objectB.Description</td>
<td>objectA.someValue</td>
</tr>
</table>
The problem is, if in my access layer, I do:
db.ObjectA.Include(o => o.ObjectB).ToList()
I get a nice error:
Object graph for type 'ObjectB' contains cycles and cannot be serialized if reference tracking is disabled.
Ok, no problem, I just add:
[DataContract(IsReference=true)]
to the *.tt file that generates the contracts (from EF).
WebAPI returns valid values (no error), but it looks like Angluar can't handle the "references" returned, which looks something like:
[
{
"$id": "1",
"someValue": "Pool",
"objectB": {
"$id": "2",
"Description": "Standard",
"ObjectAs": [
{
"$ref": "1"
},
{
"$id": "3",
"someValue": "Poolhouse",
"ObjectB": {
"$ref": "2"
},
},
},
{
"$ref": "3"
},
{
"$ref": "4"
},
{
"$ref": "5"
},
{
"$ref": "6"
},
{
"$ref": "7"
},
{
"$ref": "8"
},
{
"$ref": "9"
},
{
"$ref": "10"
},
{
"$ref": "11"
}
]
Now I can't really modify my DTOs to remove the DataMember attributes for certain navigation properties.
Any suggestions on best practices? Should I just return a light DTO (just object A), then have a javascript method that looks up Object B?
EDIT:
I took a look at the output from Angular. It turns out it converts the $ref props that WebAPI puts in to empty elements {}. Something like...
[
{
"$id": "1",
"someValue": "Pool",
"objectB": {
"$id": "2",
"Description": "Standard",
"ObjectAs": [
{
},
{
"$id": "3",
"someValue": "Poolhouse",
"ObjectB": {
},
},
},
{}, {},{}, {},{}, {},{}, {}
]
So from here, I see a few options:
Change code to only return a singluar object and make sep calls to get lookup fields
Set code to null out circular references:
ObjectA.objectB.ObjectAs = null;
Write my own formatter to handle the output
I would have expected this to be a common issue, but can't seem to find any posts about it. Is anyone else running into this?

Answer 1

I ended up add this to the WebApiConfig:
config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
config.Formatters.JsonFormatter.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.None;
That produced "better" json from WebApi (no references)