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!

here demo link : https://stackblitz.com/edit/ionic-fhpjje?file=pages%2Fhome%2Fhome.html — Chandru, Nov 27 '17 at 13:54
Possible duplicate of [Angular 2 - iterating over json array inside a json object](https://stackoverflow.com/questions/36162594/angular-2-iterating-over-json-array-inside-a-json-object) — Jota.Toledo, Nov 27 '17 at 14:09

Sajeetharan · Accepted Answer · 2017-11-27T13:53:38.977

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);

edited Nov 27 '17 at 13:53

answered Nov 27 '17 at 13:40

Sajeetharan

216,225
63
350
396

Hi thanks for the quick response! but actually I'm receiving the above format through an api. I can't change it. Can you provide another solution? – Buwaneka Kalansuriya Nov 27 '17 at 13:44
Thanks it did the trick! but won't I be able to use the related ids? – Buwaneka Kalansuriya Nov 27 '17 at 13:58
you can still use ids – Sajeetharan Nov 27 '17 at 14:12
I actually upvoted it. no idea who downvoted. Thanks! – Buwaneka Kalansuriya Nov 27 '17 at 14:29

Amit Chigadani · Answer 2 · 2017-11-27T14:05:20.637

0

Slightly different from @Sajeetharan's answer. It's enough if your data is within an array, since JSON is directly not iterable over ngFor

values = {
            data: [
                {id: "4", value: "Afghanistan"},
                {id: "8", value: "Albania"},
                {id: "10", value: "Antarctica"},
                {id: "12", value: "Algeria"},
            ]
        };

and then you could do

<ion-option *ngFor="let val of values.data">{{val.id}}----{{val.value}}</ion-option>

edited Nov 27 '17 at 14:05

answered Nov 27 '17 at 13:52

Amit Chigadani

28,482
13
80
98

any idea how I could use the ids in the json to this list? – Buwaneka Kalansuriya Nov 27 '17 at 14:00
Yes, Why not check updated answer, but slight modification in your response is required. – Amit Chigadani Nov 27 '17 at 14:05

score 0 · Answer 3 · answered Nov 27 '17 at 13:56

Hi I actually used a function provided in one of the answers: Angular 2 - iterating over json array inside a json object answer by: Ankit Singh

he has mentioned the use of a function:

generateArray(obj){
   return Object.keys(obj).map((key)=>{ return obj[key]});
}

which converts my json object into an array!

Integrate json object with dropdown in Ionic 3 Angular 4

3 Answers3