Unable to Get External JSON data in template in EmberJS

Question

I've searched on this topic and have tried multiple things but so far have been unable to solve my problem, so I created an account so I can learn :)

I am learning EmberJS and I am unable to get JSON data from the route in EmberJS to output to the actual template. However a Javascript alert in the route presents the data.

I am calling a third-party API that gets WHOIS information for domains externally over http.

Example JSON output

{
  "status": [
    "clientTransferProhibited https:\/\/icann.org\/epp#clientTransferProhibited"
  ],
  "updated_date": [
    "2012-12-04T00:00:00"
  ],
  "contacts": {
    "admin": null,
    "tech": null,
    "registrant": null,
    "billing": null
  },
  "nameservers": [
    "adns1.apple.com",
    "adns2.apple.com",
    "nserver.apple.com",
    "nserver2.apple.com",
    "nserver3.apple.com",
    "nserver4.apple.com",
    "nserver5.apple.com",
    "nserver6.apple.com"
  ],
  "expiration_date": [
    "2021-02-20T00:00:00"
  ],
  "creation_date": [
    "1987-02-19T00:00:00"
  ],
  "raw": [
    "\n   Domain Name: APPLE.COM\n   Registrar: CSC CORPORATE DOMAINS, INC.\n   Sponsoring Registrar IANA ID: 299\n   Whois Server: whois.corporatedomains.com\n   Referral URL: http:\/\/www.cscglobal.com\/global\/web\/csc\/digital-brand-services.html\n   Name Server: ADNS1.APPLE.COM\n   Name Server: ADNS2.APPLE.COM\n   Name Server: NSERVER.APPLE.COM\n   Name Server: NSERVER2.APPLE.COM\n   Name Server: NSERVER3.APPLE.COM\n   Name Server: NSERVER4.APPLE.COM\n   Name Server: NSERVER5.APPLE.COM\n   Name Server: NSERVER6.APPLE.COM\n   Status: clientTransferProhibited https:\/\/icann.org\/epp#clientTransferProhibited\n   Updated Date: 04-dec-2012\n   Creation Date: 19-feb-1987\n   Expiration Date: 20-feb-2021"
  ],
  "whois_server": [
    "whois.corporatedomains.com"
  ],
  "registrar": [
    "CSC Corporate Domains, INC."
  ]
}

Here's my code.

routes/file.js

import Ember from 'ember';

export default Ember.Route.extend({
  titleToken: "MyTitle",
  model() {
      $.ajax({
        type: "GET",
        url: "https://api.who.pm/apple.com",
        dataType: "json",
        success: function(jsonData) {
          alert(JSON.stringify(jsonData));
          return jsonData;
        },
        error: function(request, status, error) {
          console.log("Error! " + request.responseText);
        }
      });
      }
});

In my templates/file.hbs I have tried a variety of things to get the jsonData output, however have not been successful. I have tried {{model}}, {{model.data}}, and a few other things. For now I am just trying to get the data output in the template.

The alert launches successfully when the page is run.

Any help would be greatly appreciated. Thank you

Answer 1

The model hook should return a promise or actual data, you return nothing.

The return jsonData returns the success function, not the model hook. By the time the success hook is called, the model hook already has returned.

I can just strongly recommend you to inform yourself about javascript functions, callbacks and closures. Also make sure you understand this and Promises.

For usage with jQuery you need to know that jQuery 2.x .ajax() will return a thenable, but this is not a promise. This is fixed in jQuery 3.x. So for now do use RSVP.resolve:

model() {
  return Ember.RSVP.resolve($.ajax({
    type: "GET",
    url: "https://api.who.pm/apple.com",
    dataType: "json",
  }));
}