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 : stackblitz.com/edit/ionic-fhpjje?file=pages%2Fhome%2Fhome.html — Chandru
– Chandru, Commented Nov 27, 2017 at 13:54
Possible duplicate of Angular 2 - iterating over json array inside a json object — Jota.Toledo
– Jota.Toledo, Commented Nov 27, 2017 at 14:09

Sajeetharan · Accepted Answer · 2017-11-27 13:53:38Z

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, 2017 at 13:53

answered Nov 27, 2017 at 13:40

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Buwaneka Kalansuriya Over a year ago

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 Over a year ago

Thanks it did the trick! but won't I be able to use the related ids?

Sajeetharan Over a year ago

you can still use ids

Buwaneka Kalansuriya Over a year ago

I actually upvoted it. no idea who downvoted. Thanks!

Buwaneka Kalansuriya · Accepted Answer · 2017-11-27 13:56:16Z

0

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!

answered Nov 27, 2017 at 13:56

Buwaneka Kalansuriya

1469 bronze badges

Comments

Amit Chigadani · Accepted Answer · 2017-11-27 14:05:20Z

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, 2017 at 14:05

answered Nov 27, 2017 at 13:52

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

2 Comments

Buwaneka Kalansuriya Over a year ago

any idea how I could use the ids in the json to this list?

Amit Chigadani Over a year ago

Yes, Why not check updated answer, but slight modification in your response is required.

Collectives™ on Stack Overflow

Integrate json object with dropdown in Ionic 3 Angular 4

3 Answers 3

4 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Linked

Related