How to sort data coming from the API by date in Angular 4

This is the JSON data i am fetching from POSTMAN. I want it to be ordered in a nearest to todays date. I tried many angular pipes but unfortunately nothings working. Any help would be great. I want to sort the date by the "broadcastOn" field. Thanks in advance.

[ { "messageId": "09ca0609-bde7-4360-9d3f-04d6878f874c", "broadcastOn": "2018-02-08T11:06:05.000Z", "message": "{"title":"Server Side Test 2","text":"Different Message again","image":"https://api.adorable.io/avatars/285/abott@adorable.png","url":"https://www.google.co.in"}" }, { "messageId": "0a5b4d0c-051e-4955-bd33-4d40c65ce8f7", "broadcastOn": "2018-02-08T10:36:27.000Z", "message": "{"title":"Broadcast","text":"Broadcast","image":"https://api.adorable.io/avatars/285/abott@adorable.png","url":"https://www.google.co.in"}" }, { "messageId": "0a98a3f3-aa30-4e82-825a-c8c7efcef741", "broadcastOn": "2018-02-08T11:45:00.000Z", "message": "{"title":"Me sending the message","text":"Me sending the message","image":"https://api.adorable.io/avatars/285/abott@adorable.png","url":"https://www.google.co.in"}" }, { "messageId": "0cb4e30f-756a-4730-a533-594ddcd45335", "broadcastOn": "2018-02-08T11:01:57.000Z", "message": "{"title":"Server Side Test","text":"Different Message","image":"https://api.adorable.io/avatars/285/abott@adorable.png","url":"https://www.google.co.in"}" } ]

Im adding a snippet from the service section as well for your reference..

addMessage(message) { let header: Headers = new Headers(); header.append('Authorization', 'bearer' + this.authservice.getAccessToken()); let options = new RequestOptions({headers: header}); this.sent.push(message); return this.http.post('https://sexhops8j5.execute-api.us-west-2.amazonaws.com/dev/notifications/broadcast', message, options) .map(response => { return response.json(); }); } getMessage(){ let header: Headers = new Headers(); header.append('Authorization', 'bearer' + this.authservice.getAccessToken()); let options = new RequestOptions({headers: header}); return this.http.get('https://sexhops8j5.execute-api.us-west-2.amazonaws.com/dev/notifications/sent', options) .map(response => { let message=; for(let item of response.json()){ let parsedMessages = JSON.parse(item.message); message.push({...parsedMessages, BroadcastOn: item.broadcastOn,MessageId: item.messageId}); } console.log(message); return message; }); }

I'm adding a snippet of the .ts file as well

sendMessage(form){ this.messageService.addMessage({message:this.form.value.string, title:this.form.value.titleText, url:this.form.value.imageurl, image:this.form.value.image, broadcastOn:this.date}) .subscribe(message => { this.getSentMessages();console.log(message);} ); this.message = ''; this.inputImage=''; this.inputTitle=''; this.inputString=''; this.inputUrl=''; } getSentMessages(){ this.messageService.getMessage() .subscribe(message => {this.sentMessages = message}); }

What does your sorting code look like currently?
– Aeseir
Feb 21 at 4:57

It isn't sorted as of now.
– abhijith
Feb 21 at 5:34

2 Answers
2

It's not necessary lodash, nor moment. broadcastOn is a string. The date is yyy-mm-ddTHH:mm, so, if a date is bigger that other, the string is bigger that other

getSentMessages(){ this.messageService.getMessage() .subscribe(message => { this.sentMessages = message.sort((a,b)=>{ return a.broadcastOn==b.broadcastOn?0 :a.broadcastOn>b.broadcastOn?1:-1 })); }); }

Appreciate your help can please tell me where i should add your code Since I'm new to Angular 4
– abhijith
Feb 21 at 9:15

in subscribe you have a local variable "message", that is your messages. So, after received, save in this.message the messages sorted
– Eliseo
Feb 21 at 10:22

Is this what you are saying?? getSentMessages(){ this.messageService.getMessage() .subscribe(message => {this.sentMessages = message.sort((a,b)=>{ return a.broadcastOn==b.broadcastOn?0 :a.broadcastOn>b.broadcastOn?1:-1 })}); }
– abhijith
Feb 21 at 10:32

I've update the answer
– Eliseo
Feb 21 at 10:35

Thank you for your effort but its not getting sorted..
– abhijith
Feb 21 at 10:41

With help of lodash and moment you can do it like this :

lodash

moment

var sortedMessages = _.sortBy(messages, function(o) { return moment(o.broadcastOn); }).reverse(); //OR (With ES6 way) var sortedMessages = _.sortBy(messages,(o) => moment(o.broadcastOn) ).reverse();

WORKING DEMO (Angular 5)

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.js

thanks brother. The array of JSON data is coming from the backend. Since I'm new to angular I don't know where to add the code snippet which you sent should i include it in the .ts file or in the .service file. Thanks in advance
– abhijith
Feb 21 at 5:10

The scripts which you sent where should I include it. I'm working in Angular 4
– abhijith
Feb 21 at 5:11

@abhijith , then you gonna learn something new today , read this stackoverflow.com/questions/34660265/…
– Vivek Doshi
Feb 21 at 5:13

Thanks @Vivek i went through the process which you sent can you please tell me how can i use it without reverse function.
– abhijith
Feb 21 at 5:23

remove reverse it's just JavaScript function
– Vivek Doshi
Feb 21 at 5:26

reverse

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Search This Blog

Mgiyuk