-
Notifications
You must be signed in to change notification settings - Fork 1
/
jsonp.html
72 lines (57 loc) · 1.96 KB
/
jsonp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
var endpoint = "http://data.uni-muenster.de/sparql";
var query = "SELECT * WHERE { ?a ?b ?c . } LIMIT 10";
var queryUrl = "http://jsonp.lodum.de/?endpoint=" + endpoint + "&query=" + query;
function getTableHeaders(headerVars) {
var trHeaders = $("<tr></tr>");
for(var i in headerVars) {
trHeaders.append( $("<th>" + headerVars[i] + "</th>") );
}
return trHeaders;
}
function getTableRow(headerVars, rowData) {
var tr = $("<tr></tr>");
for(var i in headerVars) {
tr.append(getTableCell(headerVars[i], rowData));
}
return tr;
}
function getTableCell(fieldName, rowData) {
var td = $("<td></td>");
var fieldData = rowData[fieldName];
td.html(fieldData["value"]);
return td;
}
$.ajax({
dataType: "jsonp",
url: queryUrl,
success: function(data) {
// get the table element
var table = $("#results");
// get the sparql variables from the 'head' of the data.
var headerVars = data.head.vars;
// using the vars, make some table headers and add them to the table;
var trHeaders = getTableHeaders(headerVars);
table.append(trHeaders);
// grab the actual results from the data.
var bindings = data.results.bindings;
// for each result, make a table row and add it to the table.
for(rowIdx in bindings){
table.append(getTableRow(headerVars, bindings[rowIdx]));
}
}
});
</script>
<title>HXL Maker</title>
</head>
<body>
<table id="results"></table>
</body>
</html>