How to use SPARQL with JS components?
About SPARQL:
The SPARQL is a query language for databases that helps to retrieve and manipulate data stored in Resource Description Framework format. SPARQL allows a query to have triple patterns, conjunctions, disjunctions, and optional patterns.
A SPARQL query comprises of:
Prefix declarations | Used for abbreviating URIs |
Dataset definition | states the type of RDF graph(s) are being queried |
A result clause | identifies the information returned from the query |
The query pattern | specifies query for the underlying dataset |
Query modifiers | slicing, ordering, and rearranging query results |
The SPARQL manipulates and returns data in different formats. They are,
- SPARQL Query Results JSON Format
- SPARQL Query Results CSV and TSV Formats
- SPARQL Query Results XML Format
How to Use SPARQL with our JS Components:
All our Essential JS data Source Components receives the data in the format of JSON. You can use SPARQL Query that returns the data in the JSON format to initialize the data for JS data source controls.
The following steps explains how to create our Essential JS DropDownList component by getting the data from SPARQL Query.
Solution
- To render your JS components, you need to refer to the following code example that contains the scripts and theme files.
HTML
<head> <!--Contains the necessary theme for our components--> <link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" /> <!--dependency script files--> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <!-- We need to include the external javascript dependency library files for SPARQL query support --> <script src="scripts/jquery.sparql.js"></script> <script src="scripts/encode.js"></script> <!--contains the necessary scripts to render all the web components--> <script src="http://cdn.syncfusion.com/js/web/ej.web.all-latest.min.js"></script> </head>
Refer to the following common user guide for JavaScript to know more about getting started with our components. The “Concepts and features” section under each components explains about the features of the particular component. Refer to the following link.
Link: http://help.syncfusion.com/web
SPARQL requires the following dependency files. You need to include the following dependency files to use SPARQL query with your JS components.
- jquery.sparql.js
- urlEncode.js
You can download both the JavaScript dependency library files from the following link:
https://github.com/jgeldart/jquery-sparql
- The following code example describes the declaration of your JS DropDownList component
<body> <div class="control"> <div class="ctrllabel"> DropDownList Control Rendered with SPARQL Query </div> <br /> <input type="text" id="dropDown" /> </div> </body>
- The following code example explains how to declare and form a SPARQL query by using JavaScript and how to retrieve the data that is assigned to your JS DropDownList control.
<script type="text/javascript">
$(function () {
// declaration
// to form the SPARQL query structure by using javascript. The data’s can be retrieved from the online link specified in the where condition
$.sparql("http://dbpedia.org/sparql")
.prefix("rdfs", "http://www.w3.org/2000/01/rdf-schema#")
.select(["?label"])
.where("<http://dbpedia.org/resource/Tim_Berners-Lee>", "rdfs:label", "?label")
.execute(function success(data) { //The returned result in JSON format.
//To initialize the dropdownlist control with retrieved JSON values.
$('#dropDown').ejDropDownList({
dataSource: [data][0],
//We retrieve the JSON values with label field. So we map the label value to dropdownlist text field.
fields: { text: "label" }
});
});
</script>
The above sample describes the SPARQL support with your JS DropdownList control. You can download the sample from the following location.
Sample Link: Sample
