Check with the code.
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult GetData()
{
List<Item> itemLists = new List<Item>();
itemLists.Add(new Item { Id = 1, Date = "12/02/2020", Value = 10, Name = "a" });
itemLists.Add(new Item { Id = 2, Date = "12/08/2020", Value = 8, Name = "b" });
itemLists.Add(new Item { Id = 3, Date = "12/10/2020", Value = 5, Name = "a" });
itemLists.Add(new Item { Id = 4, Date = "12/17/2020", Value = 7, Name = "a" });
itemLists.Add(new Item { Id = 5, Date = "12/21/2020", Value = 3, Name = "a" });
List<ItemEntryDetail> details = new List<ItemEntryDetail>();
foreach (string name in itemLists.Select(x => x.Name).Distinct().ToList())
{
details.Add(new ItemEntryDetail { Item = name });
}
foreach (ItemEntryDetail item in details)
{
List<WeekValue> values = new List<WeekValue>();
foreach (string date in itemLists.Select(x => x.Date).Distinct().ToList())
{
WeekValue value = new WeekValue();
value.Week = "Week " + GetWeekNumberOfMonth(Convert.ToDateTime(date));
if (itemLists.Where(x => x.Name == item.Item && x.Date == date).FirstOrDefault() != null)
{
value.Value = itemLists.Where(x => x.Name == item.Item && x.Date == date).FirstOrDefault().Value;
}
values.Add(value);
}
item.WeekValues = values.OrderBy(x => x.Week).ToList();
}
return Json(details, JsonRequestBehavior.AllowGet);
}
public int GetWeekNumberOfMonth(DateTime date)
{
DateTime firstDayOfMonth = new DateTime(date.Year, date.Month, 1);
int firstDay = (int)firstDayOfMonth.DayOfWeek;
if (firstDay == 0)
{
firstDay = 7;
}
double d = (firstDay + date.Day - 1) / 7.0;
return (int)Math.Ceiling(d);
}
public class Item
{
public int Id { get; set; }
public string Date { get; set; }
public int Value { get; set; }
public string Name { get; set; }
}
public class ItemEntryDetail
{
public string Item { get; set; }
public List<WeekValue> WeekValues { get; set; }
}
public class WeekValue
{
public string Week { get; set; }
public int Value { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
$.post("/Home/GetData/", function (r) {
$scope.items = r;
$scope.$apply();
});
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="container" id="printarea">
<table class="table table-bordered" id="tblDetails">
<tr class="success">
<th>Item</th>
<td ng-repeat="i in items[0].WeekValues">{{i.Week}}</td>
</tr>
<tr ng-repeat="item in items">
<td>{{item.Item}}</td>
<td ng-repeat="i in item.WeekValues">
{{i.Value}}
</td>
</tr>
</table>
</div>
</body>
</html>
