Join the Stack Overflow Community
Stack Overflow is a community of 6.9 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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

share|improve this question
    
It's *ngFor, not ngFor. 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

Your json does not have an array of objects, you should use like this,

<ul>
      <li *ng-for="#person of people.pollingLocations">
          {{person.address | json}}}
    </li>
</ul>

DEMO

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.