Rendering JSON in a RAZOR view in ASP.NET MVC

Question

I'm working on an ASP.NET MVC app. My app is interacting with a third-party REST service. That service is getting called in the controller of my MVC app. The results from the service look like this:

{ "[email protected]": "#Collection", "group": [], "[email protected]": "#Collection", "class":[ { "total": 111, "value": "A" }, { "total": 222, "value": "B" }, { "total": 333, "value": "C" } ], "[email protected]": "#Collection", "status": [ { "total": 1, "value": "Open" }, { "total": 20, "value": "Closed" }, { "total": 51, "value": "Unknown" } ] } 

The results of the service are stored in a JObject property in my model called Results. For every array, I am trying to print out its key name. Then, I want to look through and print out each value and total in the array. In other words, the JSON above would look like this:

group class A - 111 B - 222 C - 333 status Open - 1 Closed - 20 Unknown - 51 

In an attempt to do this, I have the following in my View.

foreach (var result in Model.Results) { <div></div> <ul> @foreach (var subResult in result.?) { <li style="padding-left:8px;">@(subResult["value"] + " - " + subResult["total"])</li> } </ul> } 

Clearly the above doesn't work. My challenge is, I do not understand how to:

1. Loop through the key/value pairs in a JObject.
2. Identify if the value is a JArray or another JObject.

If I use result.Children(), I do not get each key/value pair like I'm expecting. At the same time, result does not have a Keys property like I would expect. I feel very stuck at the moment.

Thank you for any help you can provide. Happy holidays!

Answer 1

According to the documentation on JObject, it should implement IDictionary<string, JToken>. They might have done an explicit implementation of the interface, so you'd need to cast your JObject instance to IDictionary<string, JToken> first.

Answer 2

First of all define some classes that correspond to your Json response:

public class ServiceResponce { public IList<Row> Group{get;set;} public IList<Row> Class{get;set;} public IList<Row> Status{get;set;} } public class Row { public int Total {get;set;} public string Value {get;set;} } 

Than you can use Json.Net or some other library to deserialize your Json in to an object:

JsonConvert.DeserializeObject<ServiceResponce>(json); 

So your model will finally have ServiceResponce property:

public ServiceResponce Result{get;set;} 

Than you can easily navigate through ServiceResponce properies:

<div></div> <ul> foreach (var result in Model.Result.Group) { <li style="padding-left:8px;">@(result.Value + " - " + result.Total)</li> } <ul> 

To make it cleaner write an HtmlHelper that receives a IList<Row> as a parameter and renders it in a required format, so at the end you will end with something like:

@YourHelper(Model.Result.Group) @YourHelper(Model.Result.Class) @YourHelper(Model.Result.Status)