how to set json data to select box using angular2

Question

json data

{ "d": "[{\"batch\":\"5\",\"term\":\"TERM V\",\"section\":\"Section I\"},{\"batch\":\"5\",\"term\":\"TERM VI\",\"section\":\"Section I\"},{\"batch\":\"5\",\"term\":\"TERM VII\",\"section\":\"Section I\"},{\"batch\":\"6\",\"term\":\"TERM I\",\"section\":\"Section I\"},{\"batch\":\"6\",\"term\":\"TERM II\",\"section\":\"Section I\"}]" }

Service

getwithParamter()    
{
  let params = {program: 'pravin'};
  this.headers = new Headers();
  this.headers.append('Content-Type', 'application/json; charset=utf-8');
  //this.headers.append('Parameter',  params);
  let options = new RequestOptions({
                method: RequestMethod.Post,
                url: "AttendanceMast.aspx/getBatch",                   
                headers: this.headers,
                body:{program: 'IFDM',location:'Pune',createdby:'ifdmpune'}
                });

  return this._http.request(new Request(options)).retry(2)
             .map((response: Response) =>  JSON.parse(response.text()))
            .do(data => console.log('All: ' + data))
            .catch(this.handleError);                  

 }

ts file

  this.dataService.getwithParamter().subscribe(
  tradeshows => this.getwithparamter = tradeshows,
  error => console.error('Error: ' + error)
);

html

 Batch : <select  [(ngModel)]="sel_batch"  > <option >Select Batch</option>
                   <option *ngFor="let item of  getwithparamter   ">{{item.batch}}</option>

Question

I want to set batch from json data to select box see json data above this comes from JsonConvert.SerializeObject how to convert normal array which access by ngFor

how to do it?

AVJT82 · Accepted Answer · 2017-01-09 07:28:30Z

1

NOT TESTED CODE: You could try this: first parse the JSON like so:

ts:

  something: any;

  this.dataService.getwithParamter().subscribe(
    tradeshows => { 
      this.something = tradeshows
      this.getwithparameter = JSON.parse(this.something.d)
  });

and view:

<option *ngFor="let item of getwithparamter">{{item.batch}}</option>

OR in your html-view you could try:

  <option *ngFor="let item of getwithparamter.d">{{item.batch}}</option>

ts:

  this.dataService.getwithParamter().subscribe(
    tradeshows => { 
      this.getwithparameter = tradeshows
  });

As said, this is not tested, let me know if either works!

answered Jan 9, 2017 at 7:28

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

3 Comments

User Over a year ago

it works fine thanks but related filter function not working showing error like ORIGINAL EXCEPTION: Cannot read property 'filter' of undefined when I tried like <option *ngFor="let item of getwithparamter | filterPipe: []; ">{{item.batch}}</option>

User Over a year ago

I felt that may be filter calls before getwithparamter retrieve data Is there any idea to call filter after retrieve data in variable

AVJT82 Over a year ago

Yeah, it's probably the issue - that the pipe tries to filter before data is retrieved. You could try and add an *ngIf there, it might solve the issue: <select *ngIf="getwithparameter" [(ngModel)]="sel_batch" >

Collectives™ on Stack Overflow

how to set json data to select box using angular2

json data

Service

ts file

html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

json data

Service

ts file

html

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related