Tutorial for simple ember app using external json?


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?


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.


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


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


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?