Hide menu Last updated: Oct 31 2016
Area: Episerver Find Applies to versions: 12 and higher
Other versions:

Searching with Javascript

This topic explains how to use JSON to manage Javascript-based interactions with the REST API in Episerver Find.

How it works

While Episerver Find has no Javascript client framework, you can manage Javascript interaction with the REST API through JSON. Below are examples of how to do this. See also Autocomplete for how to build autocomplete using Javascript.

Examples

This example indexes some data, searches for it, and outputs results using alerts.

In practice, you would rarely index data from the client side, and probably do more useful things than alerting results. However, this example illustrates interactions with the REST API with no preconditions nor layers of abstractions. Start by creating a small helper function for making HTTP requests. Also, define a variable with the base URL for the index.

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 index data, you need data. Use a simple JSON object representing a restaurant:

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

 To index the restaurant, make a request to the URL of the index followed by a type name. In this case, use restaurant as type name.

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

alert(response);

The alerted response looks something like the JSON string below.

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

 

Searching

To search for restaurants, create a search request JSON object conforming to ElasticSearch's Query DSL. Construct a search for the word duck like this.

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

To execute the search, make a request to a URL built up with <url_of_index>/<type_name>/_search.

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

alert(searchResponse);

The result in the alert box looks 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, parse it, then traverse the object graph to extract things such as total number of hits and restaurant name in the result.

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

Because you only indexed a single restaurant and it matches the query, you 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, after indexing a document, it takes a second or two before it is searchable.

<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>

Comments