CODEWITHSUNDEEP
ember.jsember-power-select
Chris Johnson
Chris Johnson

Reputation: 187

Ember Power Select Issue

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!

Upvotes: 0

Views: 415

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

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);
    });
}

Upvotes: 0

Related Questions