Блог

Главная - Вопросы по программированию - Как фильтровать данные json по дате из приложения datepicker Angular2

Как фильтровать данные json по дате из приложения datepicker Angular2

#json #angular #highcharts #datepicker

#json #angular #высокие диаграммы #datepicker

Вопрос:

У меня есть приложение Angular 2, в котором я использую 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  'amp;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. Это вопрос об angular2, потому что вы передаете параметры диапазона в API сервера, может быть, вам следует обрабатывать фильтрацию там?

2. Я хочу выбрать диапазон дат в приложении с помощью datepicker

3. Ваш сервер должен обработать это, принять эти параметры и вернуть только эти значения или вернуть все ваши данные и отфильтровать их на стороне клиента (что не является хорошим вариантом). Согласно вашему API, ваш сервер должен возвращать отфильтрованные данные.

4. Я выбираю дату начала и дату окончания в mydaterangepicker, поэтому у меня есть два значения 2016-10-06, 2016-10-13, и как я могу присвоить это значение службе, где я хочу иметь этот URL: <code> localhost:54122/api/ProductionValues/ … >

5. Вы должны получить значения диапазона из datepicker через их API, затем проанализировать его по типу даты и передать в конечную точку вашей службы

Ответ №1:

Проблема заключается 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 для преобразования любых строк допустимого формата в фактический объект date вместо строки. Возможно, вам потребуется изменить параметр формата в зависимости от того, как данные возвращаются с сервера.

Кроме того, обратите внимание, что вам нужно будет выполнить a npm install moment в вашем проекте и import * as moment from 'moment'; в вашем компоненте, чтобы это сработало.