Integrate json object with dropdown in Ionic 3 Angular 4

Question

I have been stuck trying to integrate a json response to a ion-option tag. this is my html code:

<ion-item>
          <ion-label>Country</ion-label>
                  <ion-select formControlName="country">
                    <ion-option *ngFor="let value of values">{{value}}</ion-option>
                  </ion-select>
                </ion-item>

my values json object look like this:

values = {4: "Afghanistan", 8: "Albania", 10: "Antarctica", 12: "Algeria"};

This is defined in the related class of the above html file.

I get the following error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Please can someone tell me what I am doing wrong? Is the format of JSON object not supported?

Thanks in advance!

Answer 1

Your values is an object it should be an array as follows,

values = [{"Afghanistan", "Albania","Antarctica", "Algeria"}]; 

you can convert the object to array as follows,

var obj = {4: "Afghanistan", 8: "Albania", 10: "Antarctica", 12: "Algeria"}; 
var result = Object.keys(obj).map(function(key) {
  return  obj[key];
});

console.log(result);