Rendering JSON in a RAZOR view in ASP.NET MVC - 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:
{
"group#odata.type": "#Collection",
"group": [],
"class#odata.type": "#Collection",
"class":[
{ "total": 111, "value": "A" },
{ "total": 222, "value": "B" },
{ "total": 333, "value": "C" }
],
"status#odata.type": "#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:
Loop through the key/value pairs in a JObject.
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)