Search code examples
jsonangularangular2-forms

Show json data in a dropdown in Angular2

This is the json url: https://jsonplaceholder.typicode.com/todos

This is the json structure:

{
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },

I wish to show all the title in a dropdown.

Solution 
  • @Component({
  selector: 'my-app',
  template: `
    <select>
      <option  *ngFor="let item of items" [value]="item.title">{{item.title}}</option>
    </select>
  `,
})

export class App {
  items : any;
  constructor(private http:Http) {
    this.http.get('https://jsonplaceholder.typicode.com/todos')
      .subscribe(res => this.items = res.json());
  }
}

    Working plunkr