consuming API JSon calls through TVJS-tvOS

Question

I am trying to play with tvOS, and I have small question regarding handling json call. I have to get some data through an API, let\'s say for sake of test that I am calling this

Answer 1

I came across this question looking to accomplish the same thing, and was inspired by @JasonJerrett's answer, but found it a bit lacking because in my instance I am using an XML template built in Javascript like this:

// Index.xml.js
var Template = function() { 
  return `very long xml string`;
};

The issue is that you can't perform the XHR request inside the template itself, because the template string will be returned back before the XHR request actually completes (there's no way to return data from inside an asynchronous callback). My solution was to modify the resource loader and perform the XHR request there, prior to calling the template and passing the data into the template function:

ResourceLoader.prototype.loadResource = function(resource, dataEndpoint, callback) {
    var self = this;
    evaluateScripts([resource], function(success) {
        if (success) {
            // Here's the magic. Perform the API call and once it's complete,
            // call template constructor and pass in API data
            self.getJSON(dataEndpoint, function(data) {
                var resource = Template.call(self, data);
                callback.call(self, resource);
            });
        } else {
            var title = "Failed to load resources",
                description = `There was an error attempting to load the resource. \n\n Please try again later.`,
                alert = createAlert(title, description);

            Presenter.removeLoadingIndicator();

            navigationDocument.presentModal(alert);
        }
    });
}

// From: https://mathiasbynens.be/notes/xhr-responsetype-json
ResourceLoader.prototype.getJSON = function(url, successHandler, errorHandler) {
  var xhr = new XMLHttpRequest();
  xhr.open('get', url, true);
  xhr.onreadystatechange = function() {
    var status;
    var data;
    if (xhr.readyState == 4) { 
      status = xhr.status;
      if (status == 200) {
        data = JSON.parse(xhr.responseText);
        successHandler && successHandler(data);
      } else {
        errorHandler && errorHandler(status);
      }
    }
  };
  xhr.send();
};

Then the template function needs to be modified to accept the incoming API data as a parameter:

// Index.xml.js
var Template = function(data) { 
    return 'really long xml string with injected ${data}';
};