我正在尝试遍历此数据源
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"
}
]
}
]
}
最佳答案
在这种情况下,我将根据数据假定始终只有一个对象具有特定的日期。
然后,我们可以轻松地使用find()
来获取该对象,并显示该特定日期的rate
和currency
。
因此,您的select
保持不变,并且change事件将如下所示:
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
关于javascript - Angular 2数组:根据用户输入分类为数据集,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45659674/