Loading data on dropdown change in Emberjs

I have a component that is a dropdown (listing "periods") and when this selection change, should populate the form below it with a form so one can edit the data for that period.

The main template render the component just fine (I hope the code explain itself?)

and the component render with a dropdown populated with the periods

<select style="width:100%"  onchange=>
    <option>Select a period</option>
    
        <option value=></option>
    
</select>

Here's where I'm starting to loose it (very new to Ember) because model have a periods property where period have a "balance" property. So the form being show will be something like model.periods[1].balance(if you think in terms of c# code which I'm used to)

Anyhow, my problem for now is this promise thing, seems my api get hit AFTER the alert in the following code, which should only happen when the data have been returned (the alert is [object,object] anyhow...uuurgh)

 actions: {
    periodChange(period) {
        var store = this.get('store'); 
        store.findRecord('dealperiod',  period.value).then(function(data) {
          var assetBalance = data.assetBalance;
          alert(assetBalance);
          this.set('assetBalance', assetBalance);
        }); 

If someone could just point me in the right direction, not expecting to be spoonfed.

Guess my questions comes down to : what's the right way to do something only after the data have been returned (promise?) and secondly, now to name form inputs if the inputs are for a child property of the model (like in this case I have a "deal" model, which have a collection of "periods" and I want to edit data for each period as they are being selected)