javascriptjsontvosapple-tvtvjs

SyntaxError: JSON Parse error: Unexpected EOF using TVJS Framework


I am building a TVML application for Apple TV. When I run this code to make a request to a remote server I get this error: SyntaxError: JSON Parse error: Unexpected EOF. I am trying to run the code from the application.js file and populate the applications inital view. Any help is appreciated.

    loadData("https:/xxx.xxx.net")

    function loadData(url) {
      var xhr;
      var jsonData;
      xhr = new XMLHttpRequest();
      xhr.responseType = "json";
      xhr.onreadystatechange = function() {
        if (xhr.status == 200) {
        jsonData = JSON.parse(xhr.responseText);
        console.log(jsonData);
        };
      };

      xhr.open("GET", url, true);
      xhr.send();
      if (jsonData != undefined) { return jsonData }
    };

Other devices like Roku use the same api and function correctly.

{
    "playlists": [
        {
            "id": 8,
            "title": "test",
            "description": "new playlist test",
            "cover_url": "http://598-1446309178.png"
        },
        {
            "id": 9,
            "title": "test1",
            "description": "lives",
            "cover_url": "http://754-1446309324.jpg"
        },
        {
            "id": 10,
            "title": "test2",
            "description": "video games",
            "cover_url": "http://6173-1446310649.jpg"
        },
        {
            "id": 11,
            "title": "test4",
            "description": "little",
            "cover_url": "http://dd6-1446312075.jpg"
        }
    ]
}

Solution

  • You can debug your app using Safari. Once your app is running, choose "Develop / Simulator / {your app}". That part of your code looks OK, but check what xhr.responseText is, it may return empty. Your other error is that you are making an async request when you use "true" below:

    xhr.open("GET", url, true);
    

    You need to supply a callback to your function and use that callback. I am using error first callback style.

    function loadData(url, callback) {
          var xhr;
          var jsonData;
          xhr = new XMLHttpRequest();
          xhr.responseType = "json";
          xhr.onreadystatechange = function() {
            if (xhr.status == 200) {
            try{
                jsonData = JSON.parse(xhr.responseText);
            } catch(e) {
                return callback('json parsing error');
            }
            callback(null, jsonData);
            console.log(jsonData);
            };
          };
    
          xhr.open("GET", url, true);
          xhr.send();
        };