Load results from database in select box onchange event

1

hi guys

Can anyone guide me how to load data from database when i change the value on the select box? i came up with a solution but its not working.

my component.js

actions:{ filterStudent(){ let filterInputValue = this.get(‘value’); console.log(filterInputValue); let filterAction = this.get(‘filter’); console.log(filterAction); } },

my component hbs file

<select name=“newType” onchange={{action “filterStudent” value=“target.value”}} class=“form-control”>

Please Select {{#each model.Students as |newStudents|}} {{newStudents.studentName}} {{/each}}

my Controller

actions: { filterStudentResults(param) { if (param !== ‘’) { return this.get(‘store’).query(‘Students’, { studentName: param }); } else { return this.get(‘store’).findAll(‘Students’); } } } });

Any Help is Appriciated. Thanks :slight_smile:

2

You can move the logic from your controller to your component. You will also need to add the store to the component as a service.

my-component.hbs

Please Select
{{#each model.students as |newStudents|}}
  {{newStudents.studentName}}
{{/each}} 

<input type='checkbox' onClick={{action 'checkedAction'}} checked=isChecked /> Change Student Type

my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  store: Ember.inject.service(),
  isChecked: false,
  actions: {
    checkedAction() {
      if (isChecked) {
        // do something when checked
        // E.g. load all students
        this.set('model', this.get('store').findAll('students'));
      } else {
        // Do something else when NOT checked
        // E.g. only load some students
      	this.set('model', this.get('store').query('students', { type: 1 }));
      }
    }
  }
});