Ion select won't show items in array

Ionic Framework ionic-v3
1

I am trying to show a list of items in a select list.

This is my html

<ion-item>
<ion-select placeholder="Doers" interface="popover" [(ngModel)] = "doerslist">
    <ion-option *ngFor="let doer of doers" [value] = "doer.id">{{doer.name}}
    </ion-option>
</ion-select>
</ion-item>

This is my ts function to return the array from database

getDoers() {
$.get( “http://localhost:8000/getDoers.php”, function(data) {
var obj = jQuery.parseJSON(data);
var doer = {};
var doers = new Array();
for (var i = 0; i < obj.length; i++){
var name = obj[i].doer_fname + " " + obj[i].doer_lname;
var id = obj[i].doer_id;
doer = {
“id”: id,
“name” : name
};
doers.push(doer);
};

This is what is returned from the ts function:
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{id: “1”, name: “Lois Lane”}
1
:
{id: “2”, name: “Clark Kent”}
2
:
{id: “3”, name: “Bruce Wayne”}
3
:
{id: “4”, name: “Barry Allen”}
4
:
{id: “5”, name: “Henry King”}
5
:
{id: “9”, name: “Edmond Kirsch”}
6
:
{id: “13”, name: “Robert Langdon”}

However, when I clicked on the select menu, nothing happens?

Can anyone tell me what I miss? Thank you!

2

First, I’d recommend using Angular’s HTTP over using jQuery. In general I’d recommend avoiding jQuery like the black plague in Ionic.

Aside from that however, where are you assigning doerslist?

3

Thank you for you reply.

To be honest I’m quite a newbie to coding, my lecturer showed me how to use jQuery so I just adopted it. I used it for another page for adding new users to the database and it worked fine.

I didn’t assign doerslist. I had a look at some examples of ion select looping and did not see the ngmodel assigned.

Sorry for the very noob questions but I just started out coding made a mistake of jumping right into Ionic

Thanks heaps in advance

4

In that case, welcome to coding!

jQuery is great for desktop programming, but unfortunately phones aren’t as powerful as desktops (naturally) so using jQuery tends to hurt the performance and size of Ionic apps.

Ah, in hindsight I asked about the wrong variable but I’ll talk about that later.

In your template you have:
*ngFor="let doer of doers"

Which is expecting a public variable called “doers” in your controller. At the moment you certainly have. “doers” variable, but it’s restricted to your getDoers function.

So the first thing to do is to add a public doers property.
public doers: any[];

Next, in your getDoers function, remove
var doers = new Array();

Then, replace:
doers.push(doer);

With this.doers.push(doer);

5

Thank you SigmundFroyd,

I made some changes as you instructed, so now my ts function is as following:

public doers: any[];
getDoers() {
$.get(“http://localhost:8000/getDoers.php”, function(data) {
var obj = jQuery.parseJSON(data);
var doer = {};
for (var i = 0; i < obj.length; i++){
var name = obj[i].doer_fname + " " + obj[i].doer_lname;
var id = obj[i].doer_id;
doer = {
“id”: id,
“name” : name
};
this.doers.push(doer);
};
});

However now it’s giving me the error Cannot read property ‘push’ of undefined

6

D’oh! That is my bad. My excuse is that I’m on mobile, but that’s a poor excuse in this case :P.

Replace public doers: any[];

With: public doers = [];

The former defines a variable with a type, the latter initializes a variable.

I’d also recommend adding proper types if possible to help with the static typing.

7

HI Signmund, I changed it again and the complete function is now as following:

public doers = [];
getDoers() {
  $.get("http://localhost:8000/getDoers.php", function(data) {
      var obj = jQuery.parseJSON(data);
      var doer = {};
      for (var i = 0; i < obj.length; i++){
          var name = obj[i].doer_fname  + " " + obj[i].doer_lname;
          var id = obj[i].doer_id;
          doer = {
            "id": id, 
            "name" : name
          };
          this.doers.push(doer);
      };
  });

}

No changes to the html and somehow the error is still there for some reason. Did I miss anything or do I have to import anything? Thank you so much.

8

Could you do me a favor and update your posted code with formatting?

I can do the same at home in a bit, but it’ll help others viewing the thread as well.

To do it, edit your post, then click the little code button </> then paste your code into it.

9

Hi Sigmund, sorry for that, i’m not familiar with these formatting features. Just fixed it for you :slight_smile:

10

Lovely! Thank you.

Alright, so. When it comes to Ionic, you never* want to type function. Instead, you want to use the “fat arrows” => syntax. It’s my bad for not mentioning this before.

So, replace function(data) with (data) =>.

The reason for this, is that this in JavaScript is a weird thang. It’s whatever the calling “context” is. However, what we as programmers expect it to be, is the class, or in this case controller, that we’ve written. So, in order to help make this work Typescript introduced the fat arrows syntax, which makes this what we expect it to be.

*There may be a time when you want to…but it seems unlikely this will come up. I say it with an asterisk just because I don’t tend to like absolutes. I’m one of those programmers who checks both ways before crossing a way one street.

11

Oh my God, the list showed up!

Thank you so so much Sigmund for your detailed explanation, really appreciate it!

1 Like