Angular 2数组:根据用户输入分类为数据集

时间:2017-08-13 11:05:15

标签: javascript arrays json angular filtering

我正在尝试遍历此数据源 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"
        }
      ]
    }
  ]
}

1 个答案:

答案 0 :(得分:2)

在这种情况下,我会假设,根据数据总是只有一个具有特定日期的对象。

然后,我们可以轻松地使用find()来获取该对象,并显示该特定日期的ratecurrency

因此,您的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>

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