0

In app.js in this gist: https://gist.run/?id=acf8253329939b2e046cd0e3394351fe how does the SuggestionService work?

export class SuggestionService {
  constructor(model, countries) {
    this.model = model;
    this.countryIndex = countries;
    this.countries = Object.keys(countries);
  }

  country = {
    suggest: value => {
      if (value === '') {
        return Promise.resolve([]);
      }
      value = value.toLowerCase();
      const suggestions = this.countries
        .filter(x => x.toLowerCase().indexOf(value) === 0)
        .sort();
      return Promise.resolve(suggestions);
    },

    getName: suggestion => suggestion
  };

  city = {
    suggest: value => {
      if (value === '' || this.model.country === null) {
        return Promise.resolve([]);
      }
      value = value.toLowerCase();
      let suggestions = this.countryIndex[this.model.country]
        .filter(x => x.toLowerCase().indexOf(value) === 0);
      suggestions = suggestions.filter((x, i) => suggestions.indexOf(x) === i)
        .sort();
      return Promise.resolve(suggestions);
    },

    getName: suggestion => suggestion
  };
}

I don't understand the line getName: suggestion => suggestion, I assume it is selecting elements from the suggestions promise, is that correct? How does this work?

In app.html this suggestion property is used in a binding:

<span style="font-style: italic">${suggestion}</span>
Eamonn McEvoy
  • 8,876
  • 14
  • 53
  • 83
  • 2
    `suggestion => suggestion` This is just the identity function, returns the input. – XCS May 18 '17 at 11:19
  • @Cristy is there any point to this function then? Why wouldn't the caller just use the input directly? – Eamonn McEvoy May 18 '17 at 11:23
  • 2
    Its following the api defined in the autocomplete component. As it stands its a little pointless. `suggestion => suggestion` is equivalent to `function(suggestion) { return suggestion; }` however you could change it to `suggestion => "(" + suggestion + ")"`. Perhaps the suggestion could include the continent name but then when you get the name, you want to strip that out. – Devman May 18 '17 at 11:43
  • 2
    The promise thing is also following the api defined by the autocomplete component. Promises are usually for doing async things however I think its done here because using a promise means that the `.then` callback gets placed on the the callback queue instead of going straight onto the call stack which allows the browser to re-render while you continue to type. – Devman May 18 '17 at 11:50
  • 1
    @Devman No, there's no re-rendering while the promise is immediately fulfilled. The promise API however allows to fetch suggestions dynamically while typing, instead of looking them up from a static array – Bergi May 18 '17 at 13:31
  • 1
    I'm pretty sure a callback passed to `.then` is an async callback. Try running `Promise.resolve().then(() => console.log('hi')); console.log('there')` into your dev tools. 'there' gets logged before 'hi' meaning that the runtime waited for the callstack to empty before getting the .then callback from the task queue. – Devman May 18 '17 at 13:42
  • 1
    See [my answer](http://stackoverflow.com/a/41247069/218196) in the duplicate. – Felix Kling May 18 '17 at 18:27

0 Answers0