ember.js - Ember 2.x How to do linked dropdowns with data sourced from server -

i can't seem find first foothold on this. found older 1.x ways of kinda of doing want, hard coded arrays.

simply stated, want states drop down gets data server. when user selects state need counties drop down fetch list of counties in state server.

pretty easy straight ajax , js learning ember 2.x way of doing has proven elusive.

are there git projects, jsbins, twiddles or such demonstrate techniques needed this? or adventurous enough tutorial on it?

you can @ example official guide of ember-power-select. example fetches data github repositories , usage pretty simple.

regarding answer have provided suggest following changes:

js file is:

import ember 'ember'; import config '../../config/environment';  export default ember.component.extend({   company: null,   router: ember.inject.service('-routing'),    ajax: ember.inject.service(),   countynames: ember.computed('company.state', function() {     return this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json.map((county)=> {       return county.name;     });   }),    states: ['ak', 'al', 'ar', 'az', 'ca', 'co', 'ct', 'dc', 'de', 'fl', 'ga', 'hi', 'ia', 'id', 'il', 'in', 'ks', 'ky', 'la', 'ma', 'md', 'me', 'mi', 'mn', 'mo', 'ms', 'mt', 'nc', 'nd', 'ne', 'nh', 'nj', 'nm', 'nv', 'ny', 'oh', 'ok', 'or', 'pa', 'ri', 'sc', 'sd', 'tn', 'tx', 'ut', 'va', 'vt', 'wa', 'wi', 'wv', 'wy'],    actions: {     // dropdown handling     choosestate(state) {       this.set('company.state', state);     },      choosecounty(countyname) {       this.set('company.county', countyname);     } }); 

the template is:

  {{#power-select     selected=company.state     options=states     onchange=(action "choosestate")     |name|   }}     {{name}}   {{/power-select}}    {{#power-select     selected=company.county     options=countynames     onchange=(action "choosecounty")     |name|   }}     {{name}}   {{/power-select}} 

the problem answer have provided that; providing selected county dropdown string (company.county); options counties json objects. hence; second dropdown empty when select it. yet, in order initial values second dropdown appear need fetch county names initial selected state. in order overcome these 2 problems defined countynames computed property options county dropdown. depends on company.state; hence whenever state of company changes recalculated. defined contain names of counties selected value dropdown appear when make selection. note there should typos in code snippets have provided because did not try it; hope enough understand point. best regards.