Datatables rendering aJax JSON data to time format

KeiSenpai

Hello All,

I am using the moment to convert the time, however, it does not seem to be doing it correctly.

Here is the section I use at the top:

            { "data": "DAY1",
              "render": function (data, type, full) {
                     return moment(data).format('HH:mm');
              }
            },

The data being returned from the JSON file is: 1800, and I simply want to display it as 18:00 or if it says 0, leave it blank.
I would expect that to work, but it is returning 19:00, no matter what time I edit the json file to be.

I appreciate any help.

kthorngren

The best thing to do is to provide a simple test case with an example of your data so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You might need to provide the source data format. You can try using moment() outside of Datatables to debug your code.

Kevin

KeiSenpai

Thank you Kevin for replying.
I was able to setup a test case, however, I am unable to get the aJax data to load from PasteBin.

https://jsbin.com/qesocetoko/edit?html,js,console,output

Hopefully this is helpful!

kthorngren

Without seeing your specific data its hard to troubleshoot. Can you remove the ajax option and use Javascript data like this example. Maybe you can get a sample of the data using the browser's network inspector to copy some of the data in the response tab.

Kevin

KeiSenpai

Hey Kevin,

I added a JSON variable at the top and trimmed the data down to basically what I am doing, as I can apply whatever method to the rest. See if this is any better. I do apologize, I am trying to get it working the best I can while changing data and eliminating protected information.

kthorngren

Do you have a new URL?

it working the best I can while changing data and eliminating protected information

All we need is an example showing the dates you are trying to convert.

See this example with providing the source format:
http://live.datatables.net/yajicato/1/edit

Basically you need this:

moment(myDate, 'HHmm').format('HH:mm')

Kevin

KeiSenpai

Sorry, here is the URL that was provided by JSBin:

https://jsbin.com/qesocetoko/edit?html,js,console,output

It is basically a time I am trying to convert that comes back as 1800, and I need it to be 18:00. Here is the JSON:

{
    "data":  [
                 {
                     "DAY1":  1800,
                     "DAY2":  0,
                     "DAY3":  1800,
                     "DAY4":  0,
                     "DAY5":  1800,
                     "DAY6":  1800,
                     "DAY7":  0,
                     "DAY8":  1800,
                     "DAY9":  0,
                     "DAY10":  1800,
                     "DAY11":  0,
                     "DAY12":  1800,
                     "DAY13":  0,
                     "DAY14":  0,
                     "TOTALS":  7
                 }
             ]
}

This is what I had for render section:

        "columns": [
            { "data": "DAY1",
              "render": function (data, type, row) {
                return moment(data).format('hh:mm');
              }
            }

I do see a small difference between yours & mine on the moment.

KeiSenpai

I did try your method:

moment(data, 'HHmm').format('HH:mm')

vs mine

moment(data).format('hh:mm');

and got an error with yours. The one I am running seems to be pulling current time.

kthorngren

and got an error with yours.

What is the error?

I updated your test case with the JSON data and used data to load the JSON data into the table. Added the columns.render to another column to show it works.

              "render": function (data, type, row) {
                return moment(data, 'HHmm').format('HH:mm');
              }

Updated test case:
https://jsbin.com/matowimefu/1/edit?html,js,console,output

Note there is a difference between using format('hh:mm') and format('HH:mm') for the hours format.

Kevin

KeiSenpai

Thank you Kevin, I must have an error but I redid it with your suggestion and it worked!

            { "data": "DAY1",
              "render": function (data, type, row) {
                if (data > 0) {
                    return moment(data ,'Hmm').format('HH:mm');
                } else { 
                    return '';
                }
              }
            },