Displaying Fetched date in a custom calendar React native - javascript

So basically i created a custom calendar for my doctor Appointement App that looks like this:
it displays the current week and date of the days.
till now those time slot are a static array that i made and rendered in a flatlist:
this.state = {
timeList: [
{ id: 1, time: "08:00 am" },
{ id: 2, time: "09:00 am" },
{ id: 3, time: "10:00 am" },
{ id: 4, time: "11:00 am" },
{ id: 5, time: "12:00 pm" },
{ id: 6, time: "01:00 pm" },
{ id: 7, time: "02:00 pm" },
{ id: 8, time: "03:00 pm" },
{ id: 9, time: "04:00 pm" },
{ id: 10, time: "05:00 pm" },
{ id: 11, time: "06:00 pm" },
{ id: 12, time: "07:00 pm" },
{ id: 13, time: "08:00 pm" }
]
};
and:
<FlatList
data={this.state.timeList}
renderItem={({ item, index }) => this.renderTimeData(item, index)}
keyExtractor={(item, index) => index.toString()}
/>
So my problem is i want to render the time from a fetched data in a way that take into consideration the the date of the day.for instance, here is a log of the data:
so from that attribut "date_start" i should make sure the date is matching in my calendar so i can display that "9:30"
Any idea how can I approach it?
i hope i made my self clear enough and thank you for your suggestions

You can simply use a library like Moment to identify the date & time of your object as below,
let date = moment("2020-03-23 09:30").format('YYYY-MM-DD');
console.log(date)
let time = moment("2020-03-23 09:30").format('h:mm A');
console.log(time)
For more information check String format of Moment.
Hope this helps you. Feel free for doubts.

If you want to allow the user to choose date and time for a day the official react-native documentation recommend you to use DateTimePicker
With this you will have the native component for rendering date in IOS and Android.

Related

How can I use substr on json object with for loop?

Could someone help on how to loop over response while using substr to get each variable. The variables would be Amount, Type, Balance, Date.
I have the json response
[
[
"AmountTypeBalanceDate",
"$27.90Debit$6.3011/22/22, 3:32 PM",
"$30.00Credit$34.2011/22/22, 5:13 PM",
"$27.90Debit$4.209/12/22, 4:01 PM",
"$30.00Credit$32.109/12/22, 8:49 PM",
"$27.90Debit$2.107/20/22, 10:23 AM",
"$30.00Credit$30.007/20/22, 3:22 PM",
"Balance: $200.30"
]
]
Here is my code
if (xhr.status == 200) {
console.log("status 200");
var parsedWalletResult = JSON.parse(this.response);
console.log(parsedWalletResult.values[0][2]); //Get the second value
// Get the amount from the second
var walletAmount = parsedWalletResult.values[0][2]
walletAmount = walletAmount.substr(0, 5);
console.log("The wallet amount is: " + walletAmount);// The wallet amount is: $30.0
// loop over the parsed json response
for (const key in parsedWalletResult){
if(parsedWalletResult.hasOwnProperty(key)){
console.log(`${key} : ${parsedWalletResult[key]}`)
}
}
You cannot use substr() if the length of your fields differ ("Debit" vs "Credit"), at least not without hassle (i.e. trying out values until one matches).
You could use a regex though:
const data = [
[
"AmountTypeBalanceDate",
"$27.90Debit$6.3011/22/22, 3:32 PM",
"$30.00Credit$34.2011/22/22, 5:13 PM",
"$27.90Debit$4.209/12/22, 4:01 PM",
"$30.00Credit$32.109/12/22, 8:49 PM",
"$27.90Debit$2.107/20/22, 10:23 AM",
"$30.00Credit$30.007/20/22, 3:22 PM",
"Balance: $200.30"
]
]
const result = data.map(lines => lines.slice(1, -1).map(line => line.match(/(\$[0-9.]+)(\w+)(\$\d+\.\d{2})(.*)/).slice(1)))
console.log(result)
This is a perfect scenario for Regular Expressions. If you don't know regex, be careful, as this will be hard to maintain.
Here's my solution:
(possibly a more accurate regex than the other answer)
// I have removed the first and last elements so we just have data
const transactions = [
"$27.90Debit$6.3011/22/22, 3:32 PM",
"$30.00Credit$34.2011/22/22, 5:13 PM",
"$27.90Debit$4.209/12/22, 4:01 PM",
"$30.00Credit$32.109/12/22, 8:49 PM",
"$27.90Debit$2.107/20/22, 10:23 AM",
"$30.00Credit$30.007/20/22, 3:22 PM",
];
const transactionsAsObjects = transactions.map((transaction) => {
const pattern =
/(\$\d+\.\d+)(\w+)(\$\d+\.\d{2})(\d{1,2}?\/\d{1,2}\/\d{2}, \d{1,2}:\d{2} (AM|PM))/g;
const match = pattern.exec(transaction);
if (!match) return null;
return {
balance: match[1],
type: match[2],
amount: match[3],
date: match[4],
};
});
console.log(transactionsAsObjects);
/*
{balance: '$27.90', type: 'Debit', amount: '$6.30', date: '11/22/22, 3:32 PM'}
{balance: '$30.00', type: 'Credit', amount: '$34.20', date: '11/22/22, 5:13 PM'}
{balance: '$27.90', type: 'Debit', amount: '$4.20', date: '9/12/22, 4:01 PM'}
{balance: '$30.00', type: 'Credit', amount: '$32.10', date: '9/12/22, 8:49 PM'}
{balance: '$27.90', type: 'Debit', amount: '$2.10', date: '7/20/22, 10:23 AM'}
{balance: '$30.00', type: 'Credit', amount: '$30.00', date: '7/20/22, 3:22 PM'}
*/

Sort Schedule Order by Week Day (e.g Monday, Tuesday, Wednesday...)

I'm trying to solve a problem on my code. I have a hardcoded state data let's say it's from an API call. The API data for operationHours is not ordered properly by default in my case the thursday gets first instead of monday. My problem is I want to sort them by day of week (monday, tuesday, wednesday, ...) whenever I map the data. I made a sandbox here https://codesandbox.io/s/crazy-booth-4gwfi
class App extends Component {
state = {
data: {
name: "Starbucks",
operationHours: {
thursday: { from: "8:00", to: "20:00" },
friday: { from: "8:00", to: "20:00" },
saturday: { from: "8:00", to: "20:00" },
sunday: { from: "8:00", to: "20:00" },
monday: { from: "8:00", to: "20:00" },
tuesday: { from: "8:00", to: "20:00" },
wednesday: { from: "8:00", to: "20:00" }
}
}
};
render() {
return (
<div>
<h2>{this.state.data.name}</h2>
{Object.keys(this.state.data.operationHours).map(dayOfWeek => (
<div key={dayOfWeek} className="day-of-week">
{`${dayOfWeek} - ${moment(
this.state.data.operationHours[dayOfWeek].from,
"HH:mm"
).format("hh:mm A")} -
${moment(
this.state.data.operationHours[dayOfWeek].to,
"HH:mm"
).format("hh:mm A")}`}
</div>
))}
</div>
);
}
}
Instead of
{Object.keys(this.state.data.operationHours).map(dayOfWeek => (
<div key={dayOfWeek} className="day-of-week">
take an array with the sorted days, like
{['monday', 'tuesday', 'wednesday'].map(dayOfWeek => (
<div key={dayOfWeek} className="day-of-week">

How to order array objects by date?

I have an array of objects like this
layerArr = [
{
name: "layer 1"
layerDate: "/Date(6958748400000)/"
layerDateFormatted: "31 December 2018"
etc...
}
{
name: "layer 2"
layerDate: "/Date(9375937500000)/"
layerDateFormatted: "23 December 2017"
etc...
}
{
name: "layer 3"
layerDate: "/Date(1554764400000)/"
layerDateFormatted: "15 January 2018"
etc...
}]
How can I sort layerArr by date with the latest date first?
In this example, when layer 2 is sorted correctly, I also want the latest date to become layer 1 and the oldest date should become the last layer. (the example above is made up values)
Thanks
EDIT: the links suggested to other threads do not explain how to change "name" so that the latest date becomes name ="layer 1" all the way to the oldest date becoming the last layer.
Use Array.sort():
layerArr = [
{ name: "layer 1", layerDate: "/Date(6958748400000)/", layerDateFormatted: "31 December 2018" },
{ name: "layer 2", layerDate: "/Date(9375937500000)/", layerDateFormatted: "23 December 2017" },
{ name: "layer 3", layerDate: "/Date(1554764400000)/", layerDateFormatted: "15 January 2018" }
];
sortedLayerArr = layerArr.sort(function(a, b) {
return new Date(a.layerDateFormatted)- new Date(b.layerDateFormatted);
}).map((layer, index) => ({
...layer,
name: `layer ${index + 1}`,
}));
console.log(layerArr);
console.log(sortedLayerArr);

JavaScript sort date followed by time in descending order [duplicate]

This question already has answers here:
How to sort an object array by date property?
(25 answers)
Closed 5 years ago.
I was having some problem to sort the date followed by time in descending order using JavaScript. Here is some inputs:
[{chatroomID: "1", date: "12/26/2017", time: "10:31:32 PM"},
{chatroomID: "2", date: "12/26/2017", time: "10:38:01 PM"},
{chatroomID: "3", date: "12/26/2017", time: "10:35:14 PM"}]
I wanted to sort them in descending order whereby the latest one will be on top but I not sure how to do it.
The desired output:
[{chatroomID: "2", date: "12/26/2017", time: "10:38:01 PM"},
{chatroomID: "3", date: "12/26/2017", time: "10:35:14 PM"},
{chatroomID: "1", date: "12/26/2017", time: "10:31:32 PM"}]
If the result comes from the same date, then I will sort according to time. Otherwise, the latest date will be on top. Any ideas?
Thanks!
Just concat the date and time, then parse it to a Date and get the timestamp. From then on, it's just plain old sorting.
const datetimes = [
{chatroomID: "1", date: "12/26/2017", time: "10:31:32 PM"},
{chatroomID: "2", date: "12/26/2017", time: "10:38:01 PM"},
{chatroomID: "3", date: "12/26/2017", time: "10:35:14 PM"}
]
const sorted = datetimes.sort((a, b) => {
const aDate = new Date(a.date + ' ' + a.time)
const bDate = new Date(b.date + ' ' + b.time)
return bDate.getTime() - aDate.getTime()
})
console.log(sorted)
Update: The linked answer in the comment by Marcel Gwerder indicates you could just skip getTime() altogether and just compare the Dates.

how to sort time values based on From time in using filters in angular

This is my sample data:
{
"day": "Sunday",
"count": [{
"desc": "sunday one event"
}, {
"j": [{
"start": "11:00 pm"
}, {
"end": "11:51 pm"
}]
}, {
"desc": "sunday second event"
}, {
"j": [{
"start": "12:00 am"
}, {
"end": "12:06 am"
}]
}]
}
And then output will be:
sunday one event
11:00 PM, 11:51 PM,
sunday second event
12:00 AM, 12:06 AM,
But I want to show data as:
sunday second event
12:00 AM, 12:06 AM,
sunday one event
11:00 PM, 11:51 PM,
How to sort-out data based on timing (start-end)
I think you should have a id on each row, then this line of code will sort you reverse order.
"<tr ng-repeat="obj in object | orderBy:propertyName:reverse">"
the best way is to store a Date object and compare the getTime(), of these object to sort by date.

Categories

Resources