如何使用datepicker Angular2 app中的日期过滤json数据

时间:2016-10-03 06:20:18

标签: json angular highcharts datepicker

我有Angular 2 app,我使用angular2-highcharts。 我从json获取highcharts的数据,但我想过滤哪些数据将在开始和结束日期的图表中使用。 有人可以帮我解决这个问题,或者给我链接教程或我能找到相关信息的东西。

我使用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);
}

1 个答案:

答案 0 :(得分:0)

问题是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将有效格式的任何字符串转换为实际的日期对象而不是字符串。您可能需要更改format参数,具体取决于从服务器返回数据的方式。

另外,请注意,您需要在项目上执行npm install moment并在组件上import * as moment from 'moment';进行此操作。