I am attempting to create a 'simple' Ionic 2 / Angular 2 Application that provides information to voters from a Google CivicInfo API Call. Users submit their address and a Ionic2/Angular2 service provider takes the form params and creates a url query string. The response is put into an Observable.
CivicInfoProvider.ts
return this.http.get(this.BASE_URL, { search: params })
.toPromise()
.then(response => response.json() as UserData[], err => console.log(err));
With the response as a JSON Observable the user is taken to the Civic Info Listing page where the data is displayed for the user.
CivicInfoList.ts
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private info: CivicInfoProvider ) {
this.addr.street = this.navParams.get('street');
this.addr.city = this.navParams.get('city');
this.addr.state = 'PA';
this.addr.zip = this.navParams.get('zip');
this.searchString = this.addr.street + ' ' +
this.addr.city + ' ' +
this.addr.state + ' ' +
this.addr.zip;
this.userdata = this.info.getCivicInfo(this.searchString);
}
CivicInfoList.html
<ion-content padding>
<h6>Search Results For:</h6>
{{ (userdata | async)?.normalizedInput?.line1 }}
{{ (userdata | async)?.normalizedInput?.city }}
{{ (userdata | async)?.normalizedInput?.state }}
{{ (userdata | async)?.normalizedInput?.zip }}
<h6>Election Details:</h6>
<ion-list lines>
<ion-item>
Name: {{ (userdata | async)?.election?.name }}
</ion-item>
<ion-item>
Date: {{ (userdata | async)?.election?.electionDay }}
</ion-item>
</ion-list>
<h6>Your Polling Location:</h6>
<ion-item ngFor="location of userdata.pollingLocations">
{{ location }}
</ion-item>
<h6>Contests:</h6>
<ion-list lines>
<ion-item ngFor="contest of userdata.contests, [value]='object'">
{{ contest }}
</ion-item>
</ion-list>
</ion-content>
MY PROBLEM :: I CAN NOT figure out how to display the Objects that are stored in arrays pollingLocations from the JSON example below. I can display normalizedInput ...
In true Angular fashion there are no error messages or cryptic messages that do not lead to any help in documentation or Google searches.
Selectioned API Response
{
"kind": "civicinfo#voterInfoResponse",
"election": {
"id": "2000",
"name": "VIP Test Election",
"electionDay": "2017-06-06",
"ocdDivisionId": "ocd-division/country:us"
},
"normalizedInput": {
"line1": "911 Merrybell Lane",
"city": "Kennett Square",
"state": "PA",
"zip": "19348"
},
"pollingLocations": [
{
"address": {
"locationName": "KENNETT TOWNSHIP BLDG",
"line1": "801 BURROWS RUN RD",
"city": "CHADDS FORD",
"state": "PA",
"zip": ""
},
"notes": "",
"pollingHours": "",
"sources": [
{
"name": "Voting Information Project",
"official": true
}
]
}
],
Thanks for Your Help! Screen Snap
*ngFor
, notngFor
. And why do you use async everywhere to access the userdata, except there? I wouldn't use async at all: store the actual array in your component, enclose everything into an *ngIf to make sure the content is only displayed when the array is available, and remove the async and the elvis operators. – JB Nizet Oct 23 '16 at 16:39