Angular 2 Populate select drop down values from Mongoose DB

Question

I need to fetch the select drop down list vales from Mongo DB mongoose.

In my angular 2 i have something which is static as:

UPDATED CODE:

I want to achieve something like this and I have tried like :

<form role="form">
        <fieldset class="form-group">
        <label>Select Category</label><br/><br/>
        <select [(ngModel)]="selectedObject" name="first" class="form-control">

                //Static data
                <!--<option>Select</option>
                <option>Juices</option>
                <option>Chats</option>
                <option>Meals</option>-->

                <option *ngFor="let c of categories" 
                        [value]="c"
                        [selected]="c.categoryName == selectedObject.categoryName"
                        >
                        {{c.categoryName}}
                </option>
         </select>
        </fieldset>
</form>

In my component.ts i have something like:

export class BlankPageComponent implements OnInit {


selectedObject = null;
categories = [];

constructor(private addproductService: AddproductService,
    private flashMessage: FlashMessagesService,
    private router: Router) { }

  ngOnInit() {
    const categories = {
    category_name: this.category_name
 }

this.addproductService.loadData(categories).subscribe(data => { 

});

\src\app\shared\services\addproduct.service.ts

export class AddproductService {

    categories: any;

    loadData(pList: any) {
    this.categories = pList;
    if (this.categories.length > 0) {
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      return this.http.post('http://10.22.*.*:3000/categories/get', this.categories, { headers: headers })
        .map(res => res.json());
      //this.selectedObject = this.categories[0];
    }
 }

Error as of now: TypeError: Cannot read property 'subscribe' of undefined

But i need to get the values of the drop down from backend(bind them)

In my mongoose backend i have a document with field name : category_name which has values like : Juice, Meals, Chats etc and in postman i fetch them like using API:

http://10.22..:3000/categories/get

I am able to fetch the category from nodejs using GET request, But how to bind the select control and populate data from mongoose

Martin Brandhaug · Accepted Answer · 2017-07-14 15:00:37Z

1

.ts

categories = ['Juices', 'Chats', 'Meals'];
selectedCategory: string;

.html

<form role="form">
        <fieldset class="form-group">
        <label>Select Category</label><br/><br/>
        <select [(ngModel)]="selectedCategory" class="form-control">
                <option disabled>--Select--</option>
                <option *ngFor="let category of categories" [value]="category">{{category}}</option>
         </select>
        </fieldset>
</form>

answered Jul 14, 2017 at 15:00

Martin Brandhaug

1,1822 gold badges10 silver badges21 bronze badges

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

2 Comments

phyme Over a year ago

Thanks @Martin, i found that , but how do i get the values from backend, via API, as specified in my question

phyme Over a year ago

Have updated my question @Martin, which i need to achieve something as shown , but im unsure of subscribe and flatMap operator, need help!

Collectives™ on Stack Overflow

Angular 2 Populate select drop down values from Mongoose DB

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related