FaHaD FaHaD - 1 year ago 113
Javascript Question

Append DateTime in jQuery (Json) to table

I am a Beginner at JQuery(Json).I am not sure if it is possible or not to append DateTime to the Json table.I have a dropdown list.By selecting on a item its automatically load some data on table. For doing so I am trying a json function like this:


$(document).ready(function () {

$("#departmentId").change(function () {

var deptId = $("#departmentId").val();
var json = { departmentId: deptId };
$("#table").append('<table class="table"><tr><th>Course Code</th><th>Name</th><th>Schedule Info</th></tr>');
type: "POST",
url: '@Url.Action("ViewAllScheduleByDept", "ClassSchedule")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(json),
success: function (data) {

$.each(data, function (key, value) {

$("#table").append('<tr><td>' + value.Code + '</td><td>' + value.Name + '</td><td>' + value.RoomName + ',' + ***value.StartTime.toDateString() +*** ' </td></tr>');


It Displays Code,Name and RoomName perfectly but if I add StartTime to append along with these three item, It shows nothing. Is there any possible way to convert DateTime right on the Json table-append?. If not then how can I do show date time along with Code,Name and room name on MVC Razor view.

Here is my Controller:

public JsonResult ViewAllScheduleByDept(int departmentId)
var schedules = GetAllSchedule();
var scheduleList = schedules.Where(a => a.DepartmentId == departmentId).ToList();
return Json(scheduleList, JsonRequestBehavior.AllowGet);


private List<ViewSchedule> GetAllSchedule()
List<ViewSchedule> allViewSchedules = scheduleManager.ViewAllSchedule();
return allViewSchedules;


And Model:

public class ViewSchedule
public int DepartmentId { get; set; }
public string Code { get; set; }
public string Name { get; set; }
public string RoomName { get; set; }
public DateTime StartTime { get; set; }


Answer Source

The json date your endpoint returned will be some thing like this. See the value of StartTime property.

   "Name":"Some Name",
   "StartTime" :"/Date(1472239122527)/"

That is the Epoch representation of the DateTime value you had. The json serializer converted the date time value to it's corresponding unix epoch time (the number of seconds that have elapsed since 00:00:00 Coordinated Universal Time (UTC), Thursday, 1 January 1970).

But in your code you are trying to call the toDateString() method on that. toDateString() should be called on a Date object.

So convert this number to a valid Date object first and then call the toDateString method on that.

$.each(data, function (key, value) {

   var dateFormatted = new Date(parseInt(value.StartTime.substr(6))).toDateString();
   $("#table").append('<tr><td>' + value.Code
                   + '</td><td>' + value.Name 
                   + '</td><td>' + value.RoomName
                   + ',' + dateFormatted + ' </td></tr>');

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download