REST-grensesnitt
Utlisting av alle fagkoder i html-side med JQuery
Følgende html-dokument benytter JQuery og REST-grensesnittet for å liste ut en enkel html-side med lenker til alle fagkoder. Lenkene peker på URL-data – URLen, med kode og tittel som beskrivelse av lenken:
Test.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<p></p>
<script type="text/jscript">
$.getJSON("http://data.udir.no/kl06/fagkoder", {},
function (data)
{
$.each(data, function (i, fagkoder) {$('p').append('<a href=' + fagkoder["url-data"] + '>' + fagkoder.kode + ' - ' + fagkoder.tittel + '</a><br>');
})
});
</script>
</body>
</html>
Kombinasjon av grensesnitt (REST og OData)
Som et eksempel på litt mer avansert bruk, demonstrerer vi her et eksempel som tilbyr et “fritekst”-søk etter læreplaner, og mulighet for å se på detaljert informasjon om læreplanen (formålet med læreplanen). Eksempelet tar i bruk JQuery og jQuery-ui (og sannsynligvis ganske amatørmessig utført), men kan like gjerne utføres i andre teknologier.
På bildet under ser du et bilde hvor du kan skrive inn deler av kode eller tittel, og får tilbake en liste med treff. Søket går mot OData-grensesnittet, hvor du har stor frihet til å definere hva du vil hente ut, og hvordan. I dette eksempelet vil du hente tilbake kode, tittel og URL-data-feltene fra de læreplanene (maks 25) hvor læreplanens sammenslåtte kode og tittel inneholder deler av søkestrengen.
Metoden for å søke ser slik ut:
// Søker etter læreplaner
function soekEtterLaereplaner(soekestreng, maksAntallTreff) {
var url = baseurl + "odata/Læreplan?$format=json";
var filter = "&$filter=substringof('" + soekestreng.toLowerCase() + "', tolower(concat(concat(Kode, ' - '), Tittel))) eq true";
var maksResultatFilter = "&$top=" + maksAntallTreff;
var selekterFilter = "&$select=Tittel,Kode,UrlData";
$.ajax({
type: "GET",
url: url + filter + maksResultatFilter + selekterFilter,
success: function (msg) {
// behandler resultatet
}
});
}
Denne benytter standard OData-funksjonalitet for å oppgi filter og hva den vil ha tilbake. I en søke-intensiv applikasjon vil dette spare ressurser og båndbredde for klient-applikasjon og webserveren.
Ved å klikke på ett av treffene, vil den detaljerte læreplanen hentes, og formål vises.
Fra søkeresultatet har vi både URL-data-feltet, og kode-feltet. Begge disse kan brukes for å hente ut detaljer om læreplanen. Vi er kun interessert i å vise formål, og vi velger å vise formål på “default”-språket, som vil tilsvare fastsatt språk på læreplanen:
// Utdrag av koden for å hente ut detaljert læreplan, og vise formål på default språk
$.getJSON(baseurl + "kl06/" + lp.Kode, function (f) {
$('#f' + f.kode).append('<p>' + hentDefaultVerdi(f.formaal) + '</p>');
});
// Henter ut den språkversjonerte verdien med nøkkelen 'default'
function hentDefaultVerdi(spraakversjonert) {
var res = "";
$.each(spraakversjonert, function (i, s) {
if (s.noekkel = "default")
res = s.verdi;
});
return res;
}
Komplett kode til dette eksempelet (krever jquery-ui med “accordion”-widget)
<!DOCTYPE html>
<html>
<head>
<title>Læreplansøk</title>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var baseurl = "https://data.udir.no/";
var maksAntallTreff = 25;
// Hekter på event på søke-input til å kalle soekEtterLaereplaner,
// med søkestreng og maks 25 antall treff
$(document).ready(function () {
$('input[name=soek]').keyup(function () { soekEtterLaereplaner($('input[name=soek]').val(),
maksAntallTreff); }
);
});
// Søker etter læreplaner, kaller lastInnResultater
function soekEtterLaereplaner(soekestreng, maksAntallTreff) {
var url = baseurl + "KL06/odata/Læreplan?$format=json";
var filter = "&$filter=substringof('" + soekestreng.toLowerCase() + "',tolower(concat(concat(Kode, ' - '), Tittel))) eq true";
var maksResultatFilter = "&$top=" + maksAntallTreff;
var selekterFilter = "&$select=Kode";
$.ajax({
type: "GET",
url: url + filter + maksResultatFilter + selekterFilter,
success: function (msg) {
$("#resultat").text('');
lastInnResultater(msg.d.results);
}
});
}
// Lister ut resultatene, og hekter på et event som gjør at formål hentes fra detaljert
// informasjon om læreplan når resultatet åpnes
function lastInnResultater(results) {
$.each(results, function (i, lp) {
$('#resultat').append("<div id=" + lp.Kode + '><div style="height:600px" id=f' + lp.Kode + '></div></div>');
HentFormaalFraKode(lp.Kode);
});
}
// Henter ut delatjvisning fra json'
function HentFormaalFraKode(kode) {
$.getJSON(baseurl + "kl06/" + kode,
function (f) {
$('#f' + f.kode).append('<h3><a href="#">' + f.kode + "-" + hentDefaultVerdi(f.tittel)
+'</a></h3>');
$('#f' + f.kode).append('<b>Formål</b><p>' + hentDefaultVerdi(f["formaal-kapittel"].tekst)+
'</p>');
});
}
// Henter ut den språkversjonerte verdien med språk 'default'
function hentDefaultVerdi(spraakversjonert) {
var res = "";
$.each(spraakversjonert, function (i, s) {
if (s.spraak= "default")
res = s.verdi;
});
return res;
}
</script>
<p style="font-family: Arial, Sans-Serif; font-size: 15px; margin-bottom: 5px; display: block; padding: 4px; border: solid 1px #85b1de; background-color: #EDF2F7;">
Søk på læreplaner:
<input style="width: 300px;" id="soek" name="soek" type="text"/>
</p>
<div id="resultat"></div>
</body>
</html>