AngularJS doesn't handle JSON reference

Question

I'm making a little site to manage recipes. I have an MVC web api server side and an angular js front end.

Now my MVC web api is serializing JSON as (clean and readable, thank you chrome plugin JSONView)

[
{
$id: "1",
Name: "Spaghetti",
CookTime: "00:30:00",
Servings: 2,
CategoryId: 1,
Category: {
$id: "2",
Name: "Pasta",
Recipes: [
{
$ref: "1"
},
{
$id: "3",
Name: "Recipe 2",
CookTime: "01:20:00",
Servings: 2,
CategoryId: 1,
Category: {
$ref: "2"
}
Id: 2
}
],
Id: 1
}
Id: 1
},
{
$ref: "3"
}
]

But on my page, I only get the first object in my list and an empty second tr tag. Is there a way to make AngularJS understand the $ref reference? Or should I tinker with my web api config?

config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(
    config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml"));

var json = config.Formatters.JsonFormatter;
json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
json.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;

config.Formatters.Remove(config.Formatters.XmlFormatter);

- UPDATE

The json above is a pretty representation by a chrome extension. Below is the raw data I get from my service (and formatted with JSONLint, which said it's valid JSON):

[
    {
        "$id": "1",
        "Name": "Spaghetti",
        "CookTime": "00:30:00",
        "Servings": 2,
        "CategoryId": 1,
        "Category": {
            "$id": "2",
            "Name": "Pasta",
            "Recipes": [
                {
                    "$ref": "1"
                },
                {
                    "$id": "3",
                    "Name": "Recipe 2",
                    "CookTime": "01:20:00",
                    "Servings": 2,
                    "CategoryId": 1,
                    "Category": {
                        "$ref": "2"
                    }
                    "Id": 2
                }
            ],
            "Id": 1
        }
        "Id": 1
    },
    {
        "$ref": "3"
    }
]

Your JSON is messed up - is that really what you get from serialization? — mattanja
– mattanja, Commented Jan 22, 2014 at 15:55

cazzer · Accepted Answer · 2014-01-22 16:21:40Z

1

Your JSON is invalid, which means the problem is on the API side.

Category: {
  $ref: "2"
}
Id: 2
...
  ],
  Id: 1
}
Id: 1

There needs to be a comma before Id: 2 and Id: 1 for this to be parsed successfully.

answered Jan 22, 2014 at 16:21

cazzer

1,7553 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ken Bonny · Accepted Answer · 2014-02-17 06:54:32Z

0

The guys from the api have updated their code so loops now no longer occur. Which fixed my problem.

Thanks anyway! :)

answered Feb 17, 2014 at 6:54

Ken Bonny

7891 gold badge9 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS doesn't handle JSON reference

- UPDATE

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

- UPDATE

2 Answers 2

Comments

Comments

Related