Developer Center

Need a Hand?

Developer Center

Accessing the API via JavaScript

You can integrate information from the API into your web pages via JavaScript without using a complex XML parsing library thanks to support for the JSON format.

A Note About Security: Doing this exposes your API key. Only expose read-only keys.

JSON Encoding

To get API results in JSON format, pass the format=json parameter to have results returned in JSON format. (More information about the JSON format is available elsewhere; there is a technical reference at json.org.)

For example, here's the URL for a regular API request as described above, which will return a feed in XML format:

Here's the same request URL with the addition of a parameter indicating the results should be formatted as JSON instead of XML:

You can look at the live output of a feed in JSON format.

If you're using a modern, "Ajax"-style, JavaScript framework, you may find that it already has functions in place to allow you to access these URLs, parse the data they return, and output them in the desired location.

As a reference, you can view a live example using JSON feeds.

JSONP Callbacks

You can optionally also pass the callback=functionname parameter to have the JSON result data passed to that function. (More information about the JSONP technique is available elsewhere; a good starting point is available here.)

This approach allows you to define custom functions that will handle the results of each API call.

As a reference, you can view a live example using a JSONP callback.

JS-API Library

Finally, you may choose to use the Magnify JS-API library, which provides functions for retrieving and formatting some of the most commont types of API information.

Here's an example using the JS API to retrieve and display links to pages matching a specific search term:

The key elements of the example are as follows:

• Load the JS API library. This initial version is available as js-api-1.js.
• Call magnify_api_set_channel_key to set the channel name and API key.
• Call magnify_api_asynch one or more times to invoke API functions and handle the information they send back.

The magnify_api_asynch function is asynchronous, meaning that, where possible, it doesn't make the user wait for the API function to complete before displaying the rest of the page -- instead, it initiates a request and provides a way of handling the result when it arrives (which may be a fraction of a second or as much as a couple of seconds later, depending on network conditions).

Each time you call magnify_api_asynch you specify:

• The API method to call, such as content/find or list/browse.
• The arguments to be passed to the method. (The API key passed to magnify_api_set_channel_key is automatically added to the arguments that are passed to the API server.)
• The function that will handle the results returned by the API call. A number of simple formatting functions are included, as described below.
• Optionally, the HTML ID of an element whose contents should be replaced by the result of the function specified above. If you pass the special value ., a new <div> tag is created with a unique ID to hold the results. If you pass 0 or an empty value, the function results will not be displayed anywhere.

Several feed formatting functions are included and can be passed as the third parameter to the magnify_api_asynch call:

• magnify_api_content_links: Shows the title of each content item, with a links to its player page.
• magnify_api_content_link_divs: Similar to magnify_api_content_links, but with each link wrapped in <div> tags.
• magnify_api_content_teasers: Shows the title, thumbnail image, and description for each content item.

As a reference, you can view a live example using the JS-API library.