Question

我有一个JSON对象，如果我输入带有两个日期的角形式，则需要搜索

我尝试使用单日期角形控件进行搜索。

模板代码：

<div>
   <div class="card w-75">
      <div class="card-body">
          <h5 class="card-title">Invoice summary</h5>
          <hr>
          <p class="card-text">Total revenue made by this venue: <strong> 
   {{totalRevenue}}</strong></p>
          <p *ngIf="invoicesFiltered === true" class="card-text">Revenue 
made on <strong>{{inputInvoiceDate}}</strong> is <strong> 
{{filteredTotalRevenue}}</strong></p>
      </div>
  </div>

  <div>
      <div style="float:left;">
          <label for="queryInvoiceDate">Start Date:</label>
          <input
            #queryInvoiceDate
            (change)="filterInvoice(queryInvoiceDate.valueAsDate)"
            type="date"
            class="form-control"
            style="width:100%">
      </div>

      <table class="table table-striped" [mfData]="filteredInvoices" #mf="mfDataTable" [mfRowsOnPage]="10">
          <thead>
            <tr>
              <th>Advertiser Acct Balance</th>
              <th>Service Fee Amt</th>
              <th>Target Amt for Venue</th>
              <th>Venue Acct Balance</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let invoice of mf.data">
              <td>{{invoice.acntbalances}}</td>
              <td>{{invoice.servicefeeamount}}</td>
              <td>{{invoice.targetamount}}</td>
              <td>{{invoice.targetbalance}}</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
                <td colspan="4">
                    <mfBootstrapPaginator [rowsOnPageSet]="[10,15,20]"></mfBootstrapPaginator>
                </td>
            </tr>
          </tfoot>
      </table>
  </div>

组件代码：

filterInvoice(queryInvoiceDate: any) {
    this.inputInvoiceDate = queryInvoiceDate.toISOString().split('T')[0];
    this.filteredInvoices = (queryInvoiceDate) ?
    this.invoices.filter(i => 
       i.timestamp.includes(queryInvoiceDate.toISOString().split('T')[0])) : this.invoices;
    console.log(queryInvoiceDate.toISOString());
    this.filteredTotalRevenue = this.filteredInvoices.reduce((sum, invoice) => {
  return sum + invoice.targetamount; }, 0);
}

如果我想传递两个日期并搜索介于传递的日期和特定时间戳之间的所有JSON值，我该怎么办？

Answer 1

如果您需要对JavaScript中的日期进行一些琐碎的工作，我强烈建议使用momentjs。如果您正在编写一个实际应用程序而不是理论练习，则可能是这种情况。 Javascript日期杂乱无章，您可以看到您已经在做.toISOString().split('T')[0]之类的丑陋事情以提取日期。在momentjs中，您可以执行类似moment(queryInvoiceDate1).isBefore(moment(i.timestamp)) && moment(queryInvoiceDate2).isAfter(moment(i.timestamp))的操作来按日期范围过滤发票。这将使您编写更具可读性和可维护性的代码。

另一方面，关于ISO字符串的好处是可以对它们进行字典编排比较，因此'2018-09-01'为>'2018-08-01'和<'2018-09例如-03'。因此，您可以使用当前从ISO字符串中提取日期的方法，而只需在过滤器中使用> =和<=运算符即可。

在两个日期之间搜索JSON

1 个答案: