Ember: handling JSON response from ember-network promise in component - ember.js

Question

I'm trying to implement a simple autosuggest in a component. I'm testing fastboot and therefore am using ember-network to communicate with my API. I'm not using ember-data right now. Whether or not this is the "ember" way to do it is a different question...I'm just trying to get this to work.
My component JS:
import Ember from 'ember';
import fetch from 'ember-network/fetch';
export default Ember.Component.extend({
searchText: null,
loadAutoComplete(query) {
let suggestCall = 'http://my.api.com/suggest?s=' + query;
return fetch(suggestCall).then(function(response) {
return response.json();
});
},
searchResults: Ember.computed('searchText', function() {
let searchText = this.get('searchText');
if (!searchText) { return; }
let searchRes = this.loadAutoComplete(searchText);
return searchRes;
})
});
And in the template:
{{input type="text" value=searchText placeholder="Search..."}}
{{ log "TEMPALTE RESULTS" searchResults }}
{{#each-in searchResults as |result value|}}
<li>{{result}} {{value}}</li>
{{/each-in}}
The template log directive is outputting this in my console:
The data is in "suggestions", so I know the fetch is working. I just can't figure out how to get at it. I can't loop over '_result'. What do I need to do to parse this and use it in a template?

Answer 1

Returning promise from computed property is not just straight forward, it's little tricky.
Option1. You can use ember-concurrency addon for this use case. You can look at auto complete feature explanation doc
Your component code,
import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';
export default Ember.Component.extend({
searchText: null,
searchResults: task(function*(str) {
this.set('searchText', str);
let url = `http://my.api.com/suggest?s=${str}`;
let responseData = yield this.get('searchRequest').perform(url);
return responseData;
}).restartable(),
searchRequest: task(function*(url) {
let requestData;
try {
requestData = Ember.$.getJSON(url);
let result = yield requestData.promise();
return result;
} finally {
requestData.abort();
}
}).restartable(),
});
and your component hbs code,
<input type="text" value={{searchText}} onkeyup={{perform searchResults value="target.value" }}>
<div>
{{#if searchResults.isIdle}}
<ul>
{{#each searchResults.lastSuccessful.value as |data| }}
<li> {{data}} </li>
{{else}}
No result
{{/each}}
</ul>
{{else}}
Loading...
{{/if}}
</div>
Option2. You can return DS.PromiseObject or DS.PromiseArray
import Ember from 'ember';
import fetch from 'ember-network/fetch';
export default Ember.Component.extend({
searchText: null,
loadAutoComplete(query) {
let suggestCall = 'http://my.api.com/suggest?s=' + query;
return fetch(suggestCall).then(function(response) {
return response.json();
});
},
searchResults: Ember.computed('searchText', function() {
let searchText = this.get('searchText');
if (!searchText) { return; }
//if response.json returns object then you can use DS.PromiseObject, if its an array then you can use DS.PromiseArray
return DS.PromiseObject.create({
promise: this.loadAutoComplete(searchText)
});
})
});
Reference ember igniter article- The Guide to Promises in Computed Properties

Answer 2

First of all, IMO, it is not a good practice to call a remote call from a computed property. You should trigger it from input component/helper.
{{input type="text" value=searchText placeholder="Search..." key-up=(action loadAutoComplete)}}
And the new loadAutoComplete would be like:
loadAutoComplete(query) {
//check query is null or empty...
let suggestCall = 'http://my.api.com/suggest?s=' + query;
return fetch(suggestCall).then((response) => {
this.set('searchResults', response.json());
});
},
Your searchResults will no longer need to be a computed property. Just a property.