如何在 Angular 4 中按日期對來自 API 的數據進行排序

Question

這是我從 POSTMAN 獲取的 JSON 數據。 我希望它在最接近今天的日期訂購。 我嘗試了很多角形管道，但不幸的是沒有任何效果。 任何幫助都會很棒。 我想按“broadcastOn”字段對日期進行排序。 提前致謝。

[ {
        "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"}"
    }
]

我還從服務部分添加了一個片段供您參考。

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;


        });
    }

我也在添加 .ts 文件的片段

  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});
  }

Answer 1

這不是必要的 lodash，也不是瞬間。 broadcastOn 是一個字符串。 日期是 yyy-mm-ddTHH:mm，因此，如果一個日期比另一個日期大，則字符串比另一個大

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

Answer 2

在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();

工作演示（Angular 5）

 var messages = [ { "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"} } ] var sortedMessages = _.sortBy(messages, function(o) { return moment(o.broadcastOn); }) .reverse(); console.log(sortedMessages);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.js"></script>