Informationen - Beispiel: API mit JavaScript verwenden

Ladv.de API mit JavaScript verwenden

Es folgt ein einfaches Beispiel wie die ladv.de API aus JavaScript heraus in einer Homepage eingebunden werden kann. Es soll eine Seite die alle Wettkämpfe zeigt an denen der TV Sulz im Jahr 2010 teilgenommen hat erstellt werden. Die Tabelle hat drei Spalten: Datum, Veranstaltung, Ort. Die Tabelle soll nach Datum absteigend sortiert sein (die neueste Veranstaltung steht oben). Datum, Veranstaltung und Ort linken dabei auf die Veranstaltungsdetails auf ladv.de.

Html Grundgerüst für die Seite (sample.htm):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Veranstaltungsteilnahmen des TV Sulz im Jahr 2010</title>
	</head>
	<body>
		<h1 align="center">Veranstaltungsteilnahmen des TV Sulz im Jahr 2010</h2>
		<table width="100%">
			<thead> 
				<tr>
					<th align="center">Datum</th>
					<th align="center">Veranstaltung</th>
					<th align="center">Ort</th>
				</tr>
			</thead>
			<tbody id="xyz">
			</tbody>
		</table>
		<script type="text/javascript" src="ladvapiloader.js" >
		</script>
		<script type="text/javascript">
			loadJSON('http://ladv.de/api/<myapikey>/vea?vereinid=6126&format=javascript&year=2010');
		</script>
	</body>
</html>

Die JavaScript Datei die, die Tabelle füllt (ladvapiloader.js):

function addTd(text,clazz,tr,url) {
	var td = document.createElement("td");
  	td.className = clazz
  	var txt = document.createTextNode(text);
  	var a = document.createElement("a");
  	a.href = url;
  	a.appendChild(txt);
  	td.appendChild(a);
  	tr.appendChild(td);
}

function handleJSON(vea) {
  	var table = document.getElementById("xyz");
  	for (var i = 0; i < vea.length; i++) {
  		var veaDaten = vea[i];
  		var tr = document.createElement("tr");
  		addTd(veaDaten.datumText,"search",tr,veaDaten.url)
  		addTd(veaDaten.name,"search",tr,veaDaten.url)
  		addTd(veaDaten.ort,"search",tr,veaDaten.url)
  		table.appendChild(tr);
  	}
}

function loadJSON(url) {
	var headID = document.getElementsByTagName("head")[0];
  	var newScript = document.createElement('script');
  	newScript.type = 'text/javascript';
  	newScript.src = url;
  	headID.appendChild(newScript);
}

Download der Beispieldateien

So funktioniert es

Wenn sample.htm im Browser dargestellt, wird erst die JavaScript Datei ladvapiloader.js geladen. Danach wird aus dieser Datei die Methode loadJSON() aufgerufen. Die URL ist der API Aufruf der Umgangsprachlich sagt "Gib mir alle Veranstaltungen an denen der TV Sulz 2010 teilgenommen hat". Dies wird über ein JavaScript fragment gelöst, welches dynamisch in den Header der Datei eingefügt wird. Die API Anfrage wird beding durch das Argument "format=javascript" nicht nur die rohen Daten in JSON liefern, sondern diese als eine Art Callback in die Methode handleJSON() übergeben (siehe ladvapiloader.js). Die Methode handleJSON() ist dann dafür verantwortlich die Tabelle mit der id xyz mit Daten zu füllen.

Es wird empfohlen die Funktion laodJSON() so wie geliefert zu verwenden, da sie das Blockieren der API als Cross-Site-Scripting durch den Browser umgeht. Die anderen funktionen, insbesondere handleJSON() können und sollen den bedürfnissen angepasst werden. Es stehen auch deutlich mehr Daten zur Verfügung als dieses Beispiel darstellt.

praxis Beispiele

Homepage Leichtathletik Kreis Rottweil

Homepage des TV Sulz