How to map array of numbers to timing values

Question

Hi I have an array of numbers

let timearray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];

But the problem is I am displaying the array value in DOM, but I want it such a way that the values been mapped accordingly. Ex: If 0 -> 12:00am, if its 18 -> 6:00pm. How can I do that? Any idea guys? I can only think of map using if else. But that seems pretty ugly. Any idea guys?

Just to clarify, you want to turn 24 hour time into 12 hour time? — dwb, May 18 '20 at 07:43

score 3 · Answer 1 · answered May 18 '20 at 07:45

3

You need to define your array like this:

const timearray = [
 '12:00am',
 '01:00am',
 '02:00am',
 '03:00am',
...
 '10:00pm',
 '11:00pm',
]

console.log(timearray[3])
// 03:00am

answered May 18 '20 at 07:45

Tomasz

657
3
9

Sorry, I can't unfortunately. The specific time value is coming from a range slider. range from 0 to 23. So I can't give the slider string values – smokiehero May 18 '20 at 07:51
So I have a logic in my JSX like this -> ```{value}{":00"}{value > 12 ? 'pm' :'am'} ``` – smokiehero May 18 '20 at 07:53
So the "am" and "pm" is sort of dynamic. But when the value reaches 13, I need to convert to 1:00pm etc. – smokiehero May 18 '20 at 07:53
This might look dumb but actually is the most efficient way to do it lol – Hao Wu May 18 '20 at 07:54

Yaron Schwimmer · Answer 2 · 2020-05-18T08:01:45.847

1

Here's an example map function you can use (and improve based on your needs):

const timeArray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
const result = timeArray.map(t => {
  const ampm = t % 12;
  return `${ampm === 0 ? 12 : ampm}:00${t >= 12 ? 'pm' : 'am'}`;
});
console.log(result)

edited May 18 '20 at 08:01

answered May 18 '20 at 07:53

Yaron Schwimmer

5,327
5
36
59

score 0 · Answer 3 · answered May 18 '20 at 07:51

This is exactly what Array.map is for:

let timearray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]

let mapped = timearray.map(function(value) {
    switch (value) {
        case 0: return "12:00am"
        // ..
        case 18: return "6:00pm"
    }
})

Or you can use an object

let timearray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]

let map = {
    0: "12:00am",
    18: "6:00pm"
}

let mapped = timearray.map(function(value) {
    return map[value]
})

If you simply want to convert 24 hour time to 12 hour time AND NOT MAP THE VALUES then google for "24 hour time to 12 hour time" and you'll find an answer.

score 0 · Answer 4 · answered May 18 '20 at 08:01

To convert integers to hours in 12-hour format with am/pm format you can use:

let timearray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];

timearray.forEach(x => {
  var suffix = x >= 12 ? "pm":"am"; 
  hours = ((x + 11) % 12 + 1) + suffix;
  console.log(hours);
  }
);

Based on code from this answer: Converting 24 hour time to 12 hour time w/ AM & PM using Javascript

jcmortensen · Answer 5 · 2020-05-18T10:55:43.490

0

You may also consider leveraging a library such as, moment.js (https://momentjs.com/) in this situation. Here is an example of usage in your case:

var time = moment(2,"h:hh A");
console.log(time);
// 02:00am

The benefit from this approach is that you would be able to easily format the output, if required to.

edited May 18 '20 at 10:55

answered May 18 '20 at 10:49

jcmortensen

111
7

How to map array of numbers to timing values

5 Answers5