CODEWITHSUNDEEP
jsonangularangular2-forms
user2828442
user2828442

Reputation: 2515

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.

Upvotes: 0

Views: 3082

Answers (3)

Hamed Baatour
Hamed Baatour

Reputation: 6922

check out the working Plunker I created with a slick material design styling and with some simple error handling

{{ Here }}

enter image description here

in your component you do the following:

import {Component, OnInit} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/Rx'

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styles: [`
  div {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: start;
    margin-top: 1rem;
  }
  `]
})
export class AppComponent {
  constructor(private http:Http) {
    this.http.get('https://jsonplaceholder.typicode.com/todos')
      .subscribe(res => this.items = res.json(),
    err => console.error('Error: ' + err),
    () => console.log('Voila! you got your list!'));
  }
}

and then in your template you add this:

<md-toolbar color="primary">
<h4>Show json data in a dropdown in angular2 - Hamed</h4>
</md-toolbar>

<div> 
<button md-button [mdMenuTriggerFor]="menu">data dropdown menu</button>
<md-menu #menu="mdMenu">
  <button md-menu-item *ngFor="let item of items" [value]="item?.title">{{item?.title}}</button>
</md-menu>
  </div>

Upvotes: 2

The Hungry Dictator
The Hungry Dictator

Reputation: 3484

@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

Upvotes: 4

Rahul Singh
Rahul Singh

Reputation: 19622

    let todos = "the json data " // make a http call to subscribe to the data

    <select [ngModel]="selectedtitle" (ngModelChange)="onChange($event)" name="select">
        <option [value]="i" *ngFor="let i.title of todos">{{i}}</option>
    </select>

Upvotes: 0

Related Questions