How to print and separate key and values from Nested Json array angular 2 and add it in a a select box

Question

I'm having a Json data model from that i want to fetch the data and add it into a select box as my drop down items. While doing that I'm facing difficulties to fetch the data to the select box . Iterations are working fine. but the whole Json array is getting printed. I want only my 3 Major Headings to be get printed.

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

I'm adding my sample Json and expected output also

Expected Output

LEED V4 BD+C LEED V4 ID+C LEED V4 EBOM

Sample Json

{
    "Ratings": {
        "LEED V4 BD+C": [{

        }],
        "LEED V4 ID+C": [{

        }],
        "LEED V4 EBOM": [{

        }]
    }
}

app.ts

 template: `
            <div class="col-md-6 form-group">
               <label class="control-label">Rating System <span style="color: #2196f3;">*</span></label>
                <select class="form-control" id="productparameter" *ngFor="let item of ratings.Ratings" >
                <option value="">Select Rating</option>
                <option value="">{{item}}</option>
              </select>
              </div>
  `,
})

export class App {
 public ratings: any ={
    "Ratings": {
        "LEED V4 BD+C": [{

        }],
        "LEED V4 ID+C": [{

        }],
        "LEED V4 EBOM": [{

        }]
    }
}
  constructor( ) {

    console.log( this.ratings.Ratings);

  }

adding my plunker link :-https://plnkr.co/edit/pgbeS9iRkAzgWVNrLNQJ?p=preview

cнŝdk · Accepted Answer · 2017-10-05 09:31:58Z

2

Well first thing is that you need to use the ngForin your option instead of the select box itself.

<select class="form-control" id="productparameter"  >
   <option value="">Select Rating</option>
   <option *ngFor="let item of elements" value="">{{item}}</option>
</select>

And you can declare an array in your component model which will take the Object.keys(this.ratings.Ratings) where all the possible keys will be stored.

public elements: any = Object.keys(this.ratings.Ratings);

Then use this new array in your ngFor like this:

*ngFor="let item of elements"

This is your updated Plunkr.

answered Oct 5, 2017 at 9:31

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

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

Comments

Nasiruddin Saiyed · Accepted Answer · 2017-10-05 09:47:40Z

i am not getting what u want to display but i tried :

//our root app component
import {Component, NgModule, ChangeDetectorRef,Pipe} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'

@Component({
   selector: 'my-app',
   template: `
        <div class="col-md-6 form-group">
           <label class="control-label">Rating System <span style="color: #2196f3;">*</span></label>
            <select class="form-control" id="productparameter">
            <option value="">Select Rating</option>
            <option value="" *ngFor="let rat of rating">{{rat}}</option>
          </select>
          </div>`,
   })

  export class App {

     public rating : any = ["LEED V4 BD+C":["One"],"LEED V4 ID+C":["two"],"LEED V4 EBOM":["Three"]]
    constructor( ) {}

  }

 @NgModule({
   imports: [ BrowserModule, FormsModule ],
   declarations: [ App ],
   bootstrap: [ App ]
 })
 export class AppModule {}

its output will be :

Collectives™ on Stack Overflow

How to print and separate key and values from Nested Json array angular 2 and add it in a a select box

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related