Tutorial for simple ember app using external json?

1

So I have a search box. When someone enters a query, I want that to instantly perform a json GET request to an external source, throw that data into a model and display.

I’m about 6 hours in to trying to work this out. Every single time I make a tiny bit of progress there are numerous other hurdles thrown up such as cross-site issues (there goes another hour editing environment.js variables)

Are there any tutorials out there for beginners for something simple like this?

2

Cross domain is never simple, so if this is your first foray into cross domain that’s going to be a source of pain.

What you are asking is in fact very easy IF the request itself is capable of being made.

Let’s just say the source has url EXTERNAL_URL, and we’re on the route “search”. You didn’t specify whether this was returning an array or a single model, but let’s pretend it’s an endpoint for a people array and that each item will have a “name” property.

search/template.hbs

{{input type="text" value=searchString action="getSearchData" placeholder="Search"}}
<ul>
{{#each model as |person|}}
  <li>{{person.name}}</li>
{{else}}
  <li>No people found, try another search!</li>
{{/each}}
</ul>

search/controller.js

import Ember from "ember";
var jQuery = Ember.$;

export default Ember.Controller.extend({
  actions: {
    getSearchData: function() {
      var Controller = this;
       jQuery.getJSON(EXTERNAL_URL).then(function(json) {
        Controller.set('model', json);
      });
    }
  }
});
2 Likes
3

Would it be easier to link to a local PHP file where I fetch and process the external JSON? If so, where would I place that php file?