Click here to Skip to main content
15,311,385 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I often get this error when i run my application below

JavaScript
"<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
   {

       // Map all values from the record list in TimeLine Application DB.

       [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>
Posted
Comments
Richard Deeming 23-Sep-21 3:39am
   
Use your browser's developer tools to inspect the response to the AJAX request to see why the returned data doesn't contain a property called "FromDate".

We can't run your code, so we can't debug it for you.
Tgcobza Mkontwana 23-Sep-21 4:21am
   
@Richard Deeming, i did and its working now. Doing other add features to it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900