I am retrieving the arrivalTime from todos.items. As I fetch the arrivalTime, it is sorted using the sortedArray function(), which converts the times to military time. Is there a way to change the sorted military time values to standard time format after sorting?
View
<div id="app">
<div v-for="todo in sortedArray">
{{ todo.items.arrivalTime }}
</div>
<!-- Can we convert todo.items.arrivalTime into paragraph tags like below -->
<br>
<h1>
<b>Convert Into</b>
</h1>
<br>
<p>09:00 AM</p>
<p>10:00 AM</p>
<p>11:00 AM</p>
<p>02:00 PM</p>
<p>10:00 PM</p>
</div>
Script
new Vue({
el: "#app",
data: {
todos: [
{ id: "1", items:{arrivalTime: "1100"} },
{ id: "2", items:{arrivalTime: "1000"} },
{ id: "3", items:{arrivalTime: "1400"} },
{ id: "4", items:{arrivalTime: "0900"} },
{ id: "5", items:{arrivalTime: "2200"} },
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
},
computed:{
sortedArray: function() {
console.log("inside sortedArray");
function compare(a, b) {
if (a.items.arrivalTime < b.items.arrivalTime)
return -1;
if (a.items.arrivalTime > b.items.arrivalTime)
return 1;
return -1;
}
return this.todos.sort(compare);
}
}
})
I attempted converting military time to standard time using jsFiddle, but encountered difficulties. Here's my code on JsFiddle for reference.