Samsung SmartTV's API Processing

API data processing is an integral part of exchanging data between a Samsung SmartTV and a server. A data-request API is commonly processed in the following order.

  1. Receive an Ajax request.

  2. Obtain the requested data and format it as a predefined return-object variable.

  3. Return the variable through a DOM exchange.

A JavaScript library is often used to simplify the preceding Ajax request and DOM exchange.

Ajax request

First, an Ajax request is implemented using the jQuery library.

jQuery.ajax(url, { 
    type : 'GET',
    dataType : "xml",
    data: param,
    timeout: 5000,
    success: function(res, status, xhr) {
        alert('res :' + res);
        callback && callback(res);
    },
    error : function(xhr, status, error) {
        alert('error! : [Featured] ajax request URL : ' + url);
    },
    complete : function() {
        alert('Complete! : [Featured] ajax request URL : ' + url);
    }
});

The preceding example has only the bare minimum options. It configures URL for the API request to be sent, GET or POST option, response API type, and callback functions for success/error/complete cases. See the following code for packaging the request as a usable component.

var $request = function(url, param, callback) {
    jQuery.ajax(url, { 
        type : 'GET',
        dataType : "xml",
        data: param,
        timeout: 5000,
        success: function(res, status, xhr) {
            alert('res :' + res);
            callback && callback(res);
        },
        error : function(xhr, status, error) {
            alert('error! : [Featured] ajax request URL : ' + url);
        },
        complete : function() {
            alert('Complete! : [Featured] ajax request URL : ' + url);
        }
    });
};

The $request() function can be called with parameters to make an Ajax request for an XML type data. The SmartTV does not have an exclusive Ajax format. Most programming practices, including native JavaScript and jQuery, can also be used for a SmartTV application.

Formatting response data

A SmartTV application generally has several element options, such as a menu, VOD playback, and text documents. A common API also has various options. It can have either JSON or XML data type. It can also have a response structure such as List, Map, or String. It is vital to format a response into a usable variable through a well-designed API request. See the following XML document.

<?xml version="1.0" encoding="UTF-8"?>
<API>
    <item>
        <itemId>001</itemId>
        <itemName>The 2011 SmartTV</itemName>
        <itemState>false</itemState>
    </item>
    <item>
        <itemId>002</itemId>
        <itemName>The 2012 SmartTV</itemName>
        <itemState>false</itemState>
    </item>
    <item>
        <itemId>003</itemId>
        <itemName>The 2013 SmartTV</itemName>
        <itemState>true</itemState>
    </item>
    
</API>

Include a callback function, success(), in the Ajax request, to reformat the preceding XML data.

jQuery.ajax(url, {
    type : 'GET',
    dataType : "xml",
    success: function(res) {
        var result = jQuery(res).find('API > item');
    }
});

The success() callback function uses jQuery find() to access the XML element. Then it stores a member array “item” from the root element “API” into the variable result.

jQuery.isArray(result);    // true

The jQuery isArray() can be used to confirm that the result is an array type variable. Take a look at another example.

{
  "API": {
    "item": [
      {
        "itemId": "001",
        "itemName": "2011SmartTV",
        "itemState": "false"
      },
      {
        "itemId": "002",
        "itemName": "2012 SmartTV",
        "itemState": "false"
      },
      {
        "itemId": "003",
        "itemName": "2013 SmartTV",
        "itemState": "true"
      }
    ]
  }
}

The preceding source code converts an XML result into a JSON type data.

jQuery ajax() can be supplied with different parameter values to format the response data.

jQuery.ajax(url, {
    type : 'GET',
    dataType : "json",
    success: function(res) {
        var result = res.API.item;
    }
});
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com