Append DateTime in jQuery (Json) to table

Question

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:

<script>

    $(document).ready(function () {

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

            var deptId = $("#departmentId").val();
            //$("#courseId").empty();
            var json = { departmentId: deptId };
            $("#table").empty();
            $("#table").append('<table class="table"><tr><th>Course Code</th><th>Name</th><th>Schedule Info</th></tr>');
            $.ajax({
                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>');

                    });
                    $('#table').append('</table>');
                }
            });
        });
    });
</script>

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:

[HttpPost]
    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; }


}

Just to be clear on naming: there's no such thing as a "JSON table". JSON is a string, that is then converted to an object. The data argument to your success function is that converted object, not JSON. The table is HTML that you're creating from the object. — Heretic Monkey
– Heretic Monkey, Commented Aug 26, 2016 at 20:12

Shyju · Accepted Answer · 2016-08-26 19:32:31Z

1

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

[{
   "Code":"SomeCode",
   "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>');

});

edited Aug 26, 2016 at 19:32

answered Aug 26, 2016 at 19:27

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FaHaD Over a year ago

Thanks, It works.If I want just Time not the date then where i need to change @Shyju

Shyju Over a year ago

You can extract the time info from the Date object. Take a look at the mdn documentation on Date. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Append DateTime in jQuery (Json) to table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related