HTTP get returns array, I see undefined undefined

Ionic Framework
1

Hi there,

I know this is a noob question, but I hope you can assist me in anyway.

Setup, I use endpoint to retrieve array of data, then I want to display that data in a .

I have also manually setup an user array as a demo to test.

If I console log out the response i get the following:

image
image793×302 19.2 KB

Here is the code:

this.http.get(this.GetOptionsURL, this.postData).toPromise().then(resData => {
      console.log('RETRIEVED: ', resData);
       this.Options = [resData];
    });

    this.users = [
      {
        id: 1,
        first: 'Alice',
        last: 'Smith',
      },
      {
        id: 2,
        first: 'Bob',
        last: 'Davis',
      },
      {
        id: 3,
        first: 'Charlie',
        last: 'Rosenburg',
      }
    ];

    console.log('USERS: ', this.users);

then the code in my html:

<ion-select>
     <ion-select-option *ngFor="let item of Options">{{item.place + ' ' + item.place}}</ion-select-option>
</ion-select>

but this gives me the following result:
image

I tried an option with a keyvalue pair, but that also didn’t turn out so good…

Can anyone please assist me and guide me on where I am making the mistake?

Thank you in advance!

2

First off, properties start with lower case. PascalCase is for names of classes. Secondly, TypeScript is your friend, but only if you let it do its job by giving types to everything: all properties, all function parameters and return values. If you had done that, tsc would have told you exactly what’s wrong at build time:

interface Visit {
  id: string;
  place: string;
  motive: string;
  amount: string;
}

class Page {
  visits: Visit[];

  constructor(private http: HttpClient) {}

  fetchVisits(): void {
    this.http.post<Visit[]>('url', {}).toPromise()
      .then(visits => {
        this.visits = [visits];
      });
  }
}

A nice error message tells us that a Visit and a Visit[] are not interchangeable. We eliminate the square brackets around the offending part, and:

this.visits = visits;
3

Thank you very much once again @rapropos!

This resolved the issue.

I must say I do feel quite overwhelmed… started learning Ionic / Angular about a week ago from purely PHP background… and this all together with Typescript feels somewhat overwhelming.

I’m afraid, but there might be many more noob questions on the way…

But really thank you! I am learning a lot!