I often get this error when i run my application below
"<pre>angular.js:13236 TypeError: Cannot read properties of undefined (reading 'substr')
at ConvertJsonDateToDateTime (Index:70)
at Index:60
at angular.js:10973
at angular.js:15552
at m.$eval (angular.js:16820)
at m.$digest (angular.js:16636)
at m.$apply (angular.js:16928)
at g (angular.js:11266)
at t (angular.js:11464)
at XMLHttpRequest.u.onload (angular.js:11405)
What I have tried:
// Controller.cs
using TimeApplication.Models;
namespace TimeApplication.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetAll()
{
return Json(DashboardTimeLine(), JsonRequestBehavior.AllowGet);
}
public List<Dashboard> DashboardTimeLine()
{
List<Dashboard> TimeList = new List<Dashboard>();
TimeList.Add(new Dashboard { Incident = 1, dateTime = new DateTime(2021, 09, 13) });
return TimeList;
}
}
// Model.cs
public class Dashboard
{
[Key]
[Display(Name = "Incident")]
public int Incident { get; set; }
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd HH:mm}")]
public DateTime dateTime { get; set; }
[Display(Name = "Resource")]
public string Resources { get; set; }
[Display(Name = "Description")]
public string Description { get; set; }
[Display(Name = "EndDate")]
public int EndDate { get; set; }
}
// index.cshtml
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('TimeApplication', [])
app.controller('Home', function ($scope, $http) {
GetDashboardTimeLine();
function GetDashboardTimeLine() {
$scope.TimeList = [];
$http({
method: 'Get',
url: '/Home/DashboardTimeLine'
}).success(function (data, status, headers, config) {
for (var i = 0; i < data.length; i++) {
var dateTime = data[i].FromDate;
data[i].dateTime = new Date(ConvertJsonDateToDateTime(dateTime));
}
$scope.TimeList = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
function ConvertJsonDateToDateTime(date) {
var parsedDate = new Date(parseInt(date.substr(6)));
var tzoffset = (new Date(parsedDate)).getTimezoneOffset() * 60000;
var localISOTime = (new Date(parsedDate - tzoffset)).toISOString().substring(0, 19).replace('T', ' ').replace(/-/g, '/');
return localISOTime;
}
$scope.TimeDiff = function (start, end) {
var diff = (end.getTime() - start.getTime()) / 1000;
diff /= 60 * 60;
return Math.abs(Math.round(diff));
}
});
</script>
<div ng-app="TimeApplication" ng-controller="Home" align="center">
<table class="table table-bordered table-hover table-striped">
<tr>
<th>Incident</th>
<th>dateTime</th>
<th>Duration</th>
</tr>
<tbody ng-repeat="e in TimeList">
<tr>
<td>{{e.Incident}}</td>
<td>{{e.dateTime | date : "yyyy/MM/dd"}}</td>
<td>{{e.dateTime | date : "HH:mm:ss"}}</td>
<td>{{TimeDiff(e.dateTime,e.EndDate)}} Hours</td>
</tr>
</tbody>
</table>
</div>
</body>