Difficulty in displaying value returned by JSon

Question

I am sending a list to my view through Json.

MyCalendar Class

public MyCalendar()
{
  public DateTime Date {get; set;}
  public string Expense{ get; set;}
  public int Days{get;set;}
}

public List<MyCalendar> GetUserInfo()
{
    return myCalendar.ToList();
}

[Authorize]
public ActionResult GetMyCalendar()
{
    return new JsonResult
    {
        Data = new MyCalendar().GetUserInfo(),
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}

However, I am having difficulty to display them in my grid. The values sent as json are as follows:

---

I want to display them as follows:

Can I have the code in javascript how I can dothe above please.

<script id="dataTemplate" type="text/x-jquery-tmpl">
<tr>
    <td>${FormatJSONDate(Date, "yyyy/MM/dd")}</td>
    <td>${Expense}</td>
    <td>${Days}</td>
</tr>
</script>

Answer 1

You could change the way your data is returned in JSON on the server side by grouping by date. You could then get the data to display like it does above.

The other option is to group your data on the client side by date and then loop through it and display in a table.

create nested objects in javascript like groupby in C#

JQuery ForEach loop?