javascript - Angular 2 数组 : categorize into data sets based on user input

Question

我正在尝试遍历此数据源 http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml

我已成功将 xml 响应转换为 JSON，但很难将响应归类为日期集。

所以基本上我试图遍历数组，如果用户输入数组中存在的日期，则只使用相应的数据集(索引)。

例如。如果用户选择此日期“20170811”，那么我只需要“20170811”的数据集(货币、汇率)

这是我的代码//TS

this.forexDataService.getData().then((data) => {
 this.data = data;
 for(var i = 0; i < this.data.length; i++){
   this.time = this.data[i].time;
   console.log(this.time);
 }
});

//HTML

<ion-list>
    <ion-item>
        <ion-label>Date</ion-label>
        <ion-select [(ngModel)]="Date" (ionChange)='date($event)' name="date">
            <ion-option *ngFor="let item of data" [value]="item.time">{{item.time}}</ion-option>
        </ion-select>
    </ion-item>
</ion-list>

//JSON样本

{
  "docs": [
    {
      "time": "20170811",
      "Cube": [
        {
          "currency": "USD",
          "rate": "1.1765"
        },
        {
          "currency": "JPY",
          "rate": "128.41"
        },
        {
          "currency": "BGN",
          "rate": "1.9558"
        },
        {
          "currency": "CZK",
          "rate": "26.155"
        },
        {
          "currency": "DKK",
          "rate": "7.437"
        },
        {
          "currency": "GBP",
          "rate": "0.90645"
        },
        {
          "currency": "HUF",
          "rate": "305.41"
        },
        {
          "currency": "PLN",
          "rate": "4.2888"
        },
        {
          "currency": "RON",
          "rate": "4.5778"
        },
        {
          "currency": "SEK",
          "rate": "9.6083"
        },
        {
          "currency": "CHF",
          "rate": "1.132"
        },
        {
          "currency": "NOK",
          "rate": "9.3975"
        },
        {
          "currency": "HRK",
          "rate": "7.3982"
        },
        {
          "currency": "RUB",
          "rate": "70.6275"
        },
        {
          "currency": "TRY",
          "rate": "4.1765"
        },
        {
          "currency": "AUD",
          "rate": "1.4962"
        },
        {
          "currency": "BRL",
          "rate": "3.7378"
        },
        {
          "currency": "CAD",
          "rate": "1.4956"
        },
        {
          "currency": "CNY",
          "rate": "7.8414"
        },
        {
          "currency": "HKD",
          "rate": "9.1992"
        },
        {
          "currency": "IDR",
          "rate": "15722.96"
        },
        {
          "currency": "ILS",
          "rate": "4.2171"
        },
        {
          "currency": "INR",
          "rate": "75.496"
        },
        {
          "currency": "KRW",
          "rate": "1346.47"
        },
        {
          "currency": "MXN",
          "rate": "21.1711"
        },
        {
          "currency": "MYR",
          "rate": "5.0531"
        },
        {
          "currency": "NZD",
          "rate": "1.6149"
        },
        {
          "currency": "PHP",
          "rate": "60.033"
        },
        {
          "currency": "SGD",
          "rate": "1.6052"
        },
        {
          "currency": "THB",
          "rate": "39.107"
        },
        {
          "currency": "ZAR",
          "rate": "15.8741"
        }
      ]
    },
    {
      "time": "20170810",
      "Cube": [
        {
          "currency": "USD",
          "rate": "1.1732"
        },
        {
          "currency": "JPY",
          "rate": "128.76"
        },
        {
          "currency": "BGN",
          "rate": "1.9558"
        },
        {
          "currency": "CZK",
          "rate": "26.157"
        },
        {
          "currency": "DKK",
          "rate": "7.4381"
        },
        {
          "currency": "GBP",
          "rate": "0.90303"
        },
        {
          "currency": "HUF",
          "rate": "305.37"
        },
        {
          "currency": "PLN",
          "rate": "4.2717"
        },
        {
          "currency": "RON",
          "rate": "4.5743"
        },
        {
          "currency": "SEK",
          "rate": "9.568"
        },
        {
          "currency": "CHF",
          "rate": "1.1341"
        },
        {
          "currency": "NOK",
          "rate": "9.3355"
        },
        {
          "currency": "HRK",
          "rate": "7.4008"
        },
        {
          "currency": "RUB",
          "rate": "70.2875"
        },
        {
          "currency": "TRY",
          "rate": "4.1462"
        },
        {
          "currency": "AUD",
          "rate": "1.4888"
        },
        {
          "currency": "BRL",
          "rate": "3.7024"
        },
        {
          "currency": "CAD",
          "rate": "1.4923"
        },
        {
          "currency": "CNY",
          "rate": "7.8068"
        },
        {
          "currency": "HKD",
          "rate": "9.168"
        },
        {
          "currency": "IDR",
          "rate": "15670.45"
        },
        {
          "currency": "ILS",
          "rate": "4.2182"
        },
        {
          "currency": "INR",
          "rate": "75.208"
        },
        {
          "currency": "KRW",
          "rate": "1341.21"
        },
        {
          "currency": "MXN",
          "rate": "21.0547"
        },
        {
          "currency": "MYR",
          "rate": "5.0348"
        },
        {
          "currency": "NZD",
          "rate": "1.6142"
        },
        {
          "currency": "PHP",
          "rate": "59.567"
        },
        {
          "currency": "SGD",
          "rate": "1.6"
        },
        {
          "currency": "THB",
          "rate": "39.021"
        },
        {
          "currency": "ZAR",
          "rate": "15.674"
        }
      ]
    }
  ]
}

Answer 1

在这种情况下，根据数据，我假设始终只有一个对象具有特定日期。

然后我们可以轻松地使用 find() 获取该对象，并显示该特定日期的 rate 和 currency。

因此您的select 保持不变，更改事件将如下所示:

date(date) {
  this.filteredDate = this.data.find(x => x.time === date); 
}  

然后在模板中我们可以只显示数组 Cube 的内容，它现在是 filteredDate 的一个属性。我们当然需要设置一个if，如果没有匹配的对象，列表将不会显示。所以做这样的事情:

<ion-list *ngIf="filteredDate">
  <ion-item *ngFor="let item of filteredDate.Cube">
    Currency: {{item.currency}}, Rate: {{item.rate}}
  </ion-item>
</ion-list>

演示: http://plnkr.co/edit/1xwhtwB5YjKHDbRzusHP?p=preview