Ember Power Select Issue

Question

I'm having some issues with Ember Power Select. I'm able to deal with my data properly alone on the template, but for some reason power select won't let me get to any of the data from the fetch call in my component code below...

components/flight-search.js

import Component from '@ember/component';

export default Component.extend({
  flightResults: null,
  airResults: null,
  actions: {
    searchIATA(term) {
      let query = `https://iatacodes.org/api/v6/autocomplete?api_key=e7c1b7cf-62fb-440c-a0ef-4facebe1ab86&query=${term}`;
      return fetch(query).then(function(response) {
        return response.json();
      }).then(results => {
        this.set('airResults', results);
      });
    },
  }
});

components/flight-search.hbs

{{#each airResults.response.airports as |airport|}}
  {{airport.name}} - {{airport.code}}
{{/each}}

{{#power-select-typeahead
  search=(action "searchIATA")
  triggerClass="bootstrap-theme-trigger"
  dropdownClass="slide-fade bootstrap-theme-dropdown"
  selected=selectedType
  loadingMessage="Searching..."
  placeholder="e.g. New York, NY"
  onchange=(action (mut selectedType))
  as |result|
}}
<div class="-detail">
  {{result.response.airports.name}}
</div>
{{/power-select-typeahead}}

Notice above and outside of power select I've illustrated that I can get my data as needed.

Much appreciated, thanks!

Answer 1

You can try this, I have included an arrow function in both place.

searchIATA(term) {
    let query = `https://iatacodes.org/api/v6/autocomplete?api_key=e7c1b7cf-62fb-440c-a0ef-4facebe1ab86&query=${term}`;
    return fetch(query).then(response => response.json()).then(results => {
        this.set('airResults', results);
    });
}