how to display an object by fetching using reactjs? - json

Question

I am able to fetch the date from the API but unable to fetch the time and I want to display date and time beside the message. If i receive any message then it should show "today 02:21 pm" else for earlier messages it should display "11-09-2019 06:01 am".
Json data that i received through the api:
[
{
"id": "14526fgy",
"message" : "Hello",
"messageime" : "2019-11-12T03:07:58.359"
},
{
"id": "14546fgy",
"message" : "Hi",
"messagetime" : "2019-12-12T10:07:58.359Z"
}
]
I've attached an example inorder to display date and time. can anyone help me with this?

Answer 1

First you need to split the date from the API by the T ,
let dateSplit = result[0].messagedateTime.split("T");
Now you have an array with 2 elements ['2019-11-12','03:07:58.359']
SO first you need to create a variable (e.g todayDate) that contains todays date in the format of the above ie YYYY-MM-DD . You can get from the internet how to extract todays date into that format or create your own custom function to convert date in that format.
After that you need to compare
let firstPart = (todayDate === dateSplit[0])?'today':dateSplit[0];
So second part contains time, you can always refer the moment library to change the date and time formats according to how you need. So that wont be a problem. Hence your main logic is implemented in the above steps i mentioned.
let finalString = `${firstPart} , ${secondPart}`
this final string will be displayed under the chats. And here the second part variable is nothing but the time whihc is extracted according to your format by the moment.js after you pass the dateSplit1 whihc contains the time, Hope you are clear, otherwise ask me for doubts.
Update answer :
displayDate(messagedateTime) {
let time = messagedateTime;
let arr = time.split("T");
let date = new Date().getDate()
let month = new Date().getMonth() +1
let year = new Date().getFullYear()
let todayDate = `${year}-${month}-${date}`
let firstPart = (todayDate === arr[0])?'today':arr[0];
let secondPart = (arr[1].split("."))[0]
let finalString = `${firstPart} ${secondPart}`
return finalString
console.log(finalString,'wowow')
}
You can also try the js fiddle link Check here to play around

Answer 2

Just to show you how to use it. make it string to make it in your own format then if moment library or any other library don't have that custom format you want.
let datetime = "2019-11-13T03:07:58.359";
var d = datetime.split("T");
console.log(d);
let timeday = moment(d[0]).calendar();
timeday=timeday.toString();
timeday=timeday.replace(" at","");
console.log(timeday.toString());