如何從日期選擇器過濾json數據Angular2應用程序

我有Angular 2應用程序，其中使用了angular2-highcharts。我從json獲取highchart的數據，但是我想過濾哪些數據將在開始和結束日期的圖表中使用。有人可以幫助我解決這個問題，或給我鏈接教程或什麼地方，我可以找到有關信息。如何從日期選擇器過濾json數據Angular2應用程序

我用mydaterangepicker有從JSON獲取數據的服務：

@Injectable() 
export class ValuesService { 

    http: Http; 
    constructor(http: Http) { 
     this.http = http; 
    } 

    getValues(beginDate: Date, endDate: Date): 
     Observable<Values> { 
     return this.http.get('http://localhost:54122/api/ProductionValues/GetProductionValuesDATETIME?startDate=' + beginDate +'&endDate=' + endDate) 
      .map(this.extractData) 
      .catch(this.handleError) 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body || {}; 
    } 

    private handleError(error: any) { 
     // // In a real world app, we might use a remote logging infrastructure 
     // // We'd also dig deeper into the error to get a better message 
     let errMsg = (error.message) ? error.message : 
      error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
}

來源

2016-10-03 Marko

這是關於angular2的問題，導致您將範圍參數傳遞給服務器api，也許您應該在那裏處理過濾？ –

我想用日期選擇器在應用程序中選擇日期範圍 – Marko

您的服務器應該處理此問題，接受這些參數並僅返回這些值或返回所有數據並在客戶端對其進行過濾（這不是一個好選擇）。根據您的API，您的服務器應該返回過濾的數據。 – Manish

的問題是res.json()返回日期爲字符串。最後我改變了我的映射HTTP GET在我的應用程序調用看起來像這樣：

.map(res => { 
      let jsonData = res.json(); 
      for (let obj of jsonData) { 
       for (let prop in obj) { 
        if (moment(obj[prop], moment.ISO_8601).isValid()) { 
         obj[prop] = new Date(obj[prop]); 
        } 
       } 
      } 
      return jsonData; 
     })

基本上，這使用momentjs到的有效格式的任何字符串轉換爲實際日期對象，而不是一個字符串。您可能需要根據從服務器返回數據的方式來更改格式參數。

此外，請注意，您需要在您的項目上執行npm install moment並在您的組件上執行import * as moment from 'moment';以完成此項工作。

來源

2017-05-30 22:18:28 yanbu

如何從日期選擇器過濾json數據Angular2應用程序

回答

相關問題