This content is archived. See latest version here

Last updated: Apr 03 2014

Introduction

There is no specific Javascript client framework for EPiServer Find, but the Javascript interaction with the REST API is easily done using JSON. Below you will find some examples of how this can be done. See also the Autocomplete section, for more information on how to build autocomplete usig Javascript.

Examples

In this example we will both index some data and search for it. We'll output all results using alerts. In practice you would rarely index data from the client side, and probably also do more useful things than alerting results. However, this example is intended to show interactions with the REST API without any preconditions or layers of abstractions.

We start by creating a small helper function for making HTTP requests. We also define a variable with the base URL for our index:

C#
function execute(method, url, body) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open(method, url, false)
    xmlhttp.send(body);
    return xmlhttp.responseText;
}

var serviceUrl = "http://es-api01.episerver.com/opifdglkjassdtert/jsexample";

Indexing

To be able to index data we need data. We will use a simple JSON object representing a "restaurant":

C#
var restaurant = {
    "name": "The Fat Duck",
    "head_chef": "Heston Blumenthal"
};

 To index the restaurant we need to make a request to the URL of the index followed by a type name. In our case we use "restaurant" as type name.

C#
var indexUrl = serviceUrl + "/restaurant";
var response = 
  execute('POST', indexUrl, JSON.stringify(restaurant));

alert(response);

The alerted response will look something like the JSON string below.

{"ok":true,"_index":"jsexample",
"_type":"restaurant","_id":"IpFyguW9QuiPWe6ut7tmyw","_version":1}

Searching

To search for restaurants, we create a search request JSON object conforming to ElasticSearch's Query DSL. A simple search for the word "duck" could be constructed like this:

C#
var searchRequest = {
    "query_string": {
        "query": "duck"
    }
};

We execute the search by making a request to a URL built up with <url_of_index>/<type_name>/_search.

C#
var searchUrl = serviceUrl + "/restaurant/_search";
var searchResponse =
  execute('GET', searchUrl, JSON.stringify(searchRequest));

alert(searchResponse);

The result in the alert box will look something like this:

{"took":2,"timed_out":false,"_shards":{"total":5,"successful":5,"failed":0},"hits":{"total":1,"max_score":1.0,"hits":[{"_index":"jsexample","_type":"restaurant","_id":"ldv_pI4nSHmVjpdKjSA2gQ","_score":1.0, "_source" : {"name":"The Fat Duck","head_chef":"Heston Blumenthal"}}]}}

To extract actual values from this we can parse it, and then just traverse the object graph to extract things such as the total number of hits and the name of the restaurants in the result:

C#
var searchResult = JSON.parse(searchResponse);
alert(searchResult.hits.total);
alert(searchResult.hits.hits[0]._source.name);

As we only indexed a single restaurant and it matches our query, we will see "1" in the first alert box and "The Fat Duck" in the second.

Full source code

Below is the full source code, including script tags. Simply cut and paste it into a HTML page and insert the URL of your index. Keep in mind that it takes a second or two from indexing a document and before it is searchable.

C#
<script>
function execute(method, url, body) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open(method, url, false)
    xmlhttp.send(body);
    return xmlhttp.responseText;
}

var serviceUrl = "URL_OF_YOUR_INDEX_HERE";

var restaurant = {
    "name": "The Fat Duck",
    "head_chef": "Heston Blumenthal"
};

var indexUrl = serviceUrl + "/restaurant";
var response = 
  execute('POST', indexUrl, JSON.stringify(restaurant));

alert(response);

var searchRequest = {
    "query_string": {
        "query": "duck"
    }
};

var searchUrl = serviceUrl + "/restaurant/_search";
var searchResponse =
  execute('GET', searchUrl, JSON.stringify(searchRequest));

alert(searchResponse);

var searchResult = JSON.parse(searchResponse);
alert(searchResult.hits.total);
alert(searchResult.hits.hits[0]._source.name);
</script>

Do you have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/