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:

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!

rossisdead · Accepted Answer · 2014-12-23 20:50:02Z

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.

edited Dec 23, 2014 at 20:50

answered Dec 23, 2014 at 19:21

rossisdead

2,1161 gold badge19 silver badges30 bronze badges

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

Comments

Alex Art. · Accepted Answer · 2014-12-23 18:46:15Z

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)

Collectives™ on Stack Overflow

Rendering JSON in a RAZOR view in ASP.NET MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related