# Subscribing to a JSON subject
The page provides an overview of how to subscribe to a subject of type [JSON](../datasource/datasource-json-data.md).
## Requirements
To use the [JSON data type](../datasource/datasource-json-data.md), your Caplin components and libraries must be at least as recent as the versions listed in the table below:
**Product versions supporting the JSON data type**
| Product | Minimum Version |
| --- | --- |
| C DataSource API | 7.1.9 |
| Java DataSource API | 7.1.9 |
| .NET DataSource API | 7.1.9 |
| Liberator | 7.1.8 |
| Transformer | 7.1.5 |
| StreamLink iOS | 7.1.0 |
| StreamLink Android | 7.1.1 |
| StreamLink Java | 7.1.1 |
| StreamLink JS | 7.1.1 |
| StreamLink .NET | 7.1.1 |
## Overview
To subscribe to a JSON subject using [StreamLink JS](https://docs.caplin.com/developer/api/streamlinkjs/latest/), follow the steps below:
1. Create one implementation of StreamLink’s [JsonHandler](https://docs.caplin.com/developer/api/streamlinkjs/latest/classes/JsonHandler.html) interface to handle the realisation of JSON images and updates.
**Example 1: a JsonHandler that applies a patch to a previously realised image**
```js
var jsonHandler = {
parse: function (jsonString) {
return JSON.parse(jsonString);
},
patch: function (existingObject, jsonPatchString) {
var patch = JSON.parse(jsonPatchString);
return patch.reduce(jsonpatch.applyReducer, existingObject); ①
},
format: function () {}
};
```
1. The `jsonpatch` object is from the [fast-json-patch](https://www.npmjs.com/package/fast-json-patch) library
**Example 2: a JsonHandler that applies a patch by creating a new immutable state**
```js
var jsonHandler = {
parse: function (jsonString) {
return JSON.parse(jsonString);
},
patch: function (existingObject, jsonPatchString) {
var patch = JSON.parse(jsonPatchString);
var result = immer.produce(existingObject, function (existing) { ①
return patch.reduce(jsonpatch.applyReducer, existing); ②
});
return result;
},
format: function () {}
};
```
1. The `immer` object is provided by the [immer](https://github.com/immerjs/immer) library
2. The `jsonpatch` object is provided by the [fast-json-patch](https://www.npmjs.com/package/fast-json-patch) library
2. Specify your implementation of [JsonHandler](https://docs.caplin.com/developer/api/streamlinkjs/latest/classes/JsonHandler.html) as the `json_handler` property of the configuration object when creating the StreamLink object:
```js
var streamLink = caplin.streamlink.StreamLinkFactory.create({
...
json_handler: jsonHandler
...
});
```
3. Implement the `onJsonUpdate` method in your implementation of [SubscriptionListener](https://docs.caplin.com/developer/api/streamlinkjs/latest/classes/SubscriptionListener.html). The method receives an event object of type [JsonEvent](https://docs.caplin.com/developer/api/streamlinkjs/latest/classes/JsonEvent.html). The `JsonEvent.getJson()` method returns a reference to the realised or patched JSON.
```js
var subscriptionListener = {
...
onJsonUpdate: function (subscription, event) {
window.console.info(event.getJson());
}
...
};
```
4. Subscribe to the JSON subject and connect
```js
streamLink.subscribe("/EXAMPLES/JSON/AAPL", subscriptionListener);
streamLink.connect();
```
## Example
The example below is adapted from the StreamLink JS examples that ship with Liberator. To view the example locally, activate your Liberator’s LiberatorWebsite and LiberatorDemoDataSource blades, and navigate to http://localhost:18080/docs/sljs/interactive/.
Code in the example that is specific to subscribing to JSON subjects is highlighted in yellow.
**Example: subscribing to a JSON subject**
```html
Log:
```
---
**See also**:
* [JSON data type](../datasource/datasource-json-data.md)