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.
-
2Please, share what have you tried so far and point out where is the problem.AndrasCsanyi– AndrasCsanyi2017-05-25 10:08:41 +00:00Commented May 25, 2017 at 10:08
-
@user2828442 check out my answer and the live demo on Plunker below and if you still have any question just let me know :)Hamed Baatour– Hamed Baatour2017-05-25 11:46:00 +00:00Commented May 25, 2017 at 11:46
Add a comment
|
3 Answers
@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
answered May 25, 2017 at 10:33
The Hungry Dictator
3,4845 gold badges41 silver badges56 bronze badges
Comments
check out the working Plunker I created with a slick material design styling and with some simple error handling
{{ 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>
Comments
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>
