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!

Are you using this in a modal? In that case, you can try to add `renderInPlace=true` to power-select-typeahead — pusle, Sep 14 '18 at 10:13

score 0 · Answer 1 · answered Sep 11 '18 at 04:22

0

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

answered Sep 11 '18 at 04:22

Ember Freak

12,918
4
24
54

Where are we passing options property to power select? it seems this will take it from ` as |result|`, so I believe you may need to say ` as |airResults|`..PS: I haven't tried powerslect-type-ahead component. but I am aware of power-select component. – Ember Freak Sep 11 '18 at 04:56

Ember Power Select Issue

1 Answers1