JSON: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Thomas (Diskussion | Beiträge) (Erste Erstellung) |
Thomas (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 5: | Zeile 5: | ||
Das Objekt kann über nachfolgenden Code in eine Seite eingebunden werden. Leider funktioniert dies nicht lokal. Die Browser erlauben auch bei lokalen HTML-Dateien kein Nachladen der lokalen Datendatei. | Das Objekt kann über nachfolgenden Code in eine Seite eingebunden werden. Leider funktioniert dies nicht lokal. Die Browser erlauben auch bei lokalen HTML-Dateien kein Nachladen der lokalen Datendatei. | ||
<pre> | |||
var xmlhttp = new XMLHttpRequest(); | var xmlhttp = new XMLHttpRequest(); | ||
Aktuelle Version vom 11. August 2016, 10:39 Uhr
JavaScript Object Notation (JSON) ist eine Möglichkeit JavaScript Objekte in ein eigenen Datei abzulegen und in den JavaScript Code einzubinden. Diese wird häufig verwendet, wenn die Daten der Objekte dynamisch erzeugt werden (Z.B. Freifunk Knoten Karten). Anstelle des Zugriffes auf eine Datenbank auf dem Server über PHP werden die Daten in ein JavaScript Objekt abgelegt und lokal im Browser durch JavaScript Code angezeigt.
Einbetten der JSON-Dateien in die Seite
Das Objekt kann über nachfolgenden Code in eine Seite eingebunden werden. Leider funktioniert dies nicht lokal. Die Browser erlauben auch bei lokalen HTML-Dateien kein Nachladen der lokalen Datendatei.
var xmlhttp = new XMLHttpRequest();
var url = "data/nodes.json";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
var NodesData = JSON.parse(response);
...
document.getElementById("id01").innerHTML = out;
}
Vollständiges Beispiel
Im folgenden Beispiel sind die Daten der Freifunkknoten in einer Datei data/nodes.json abgelegt und werden auf einer Karte gezeichnet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="menue">
<ul class="back-button">
<li class="menu-button"><a href="index.php">Home</a></li>
<li class="menu-button"><a href="map.php">Karte</a></li>
<!-- li class="menu-button"><a href="test.html">Test</a></li-->
</ul>
</nav><h1>Freifunk-Nodes Liste</h1>
<h2>Filter</h2>
<div class="ff-form-box">
<form action="" method="post">
<label>Ort:</label><br />
<input type="text" id="Ortsfilter" name="Ortsfilter" size="32" maxlenght="255" value=""><br>
<input type="submit" name="submit" value="Neu laden und filtern">
</form>
</div>
<p>Kleiner Tipp: Der Filter versteht reguläre Ausdrücke.</p>
<h2>Tabelle der Knoten</h2>
<table>
<thead>
<tr><th>
Nr.
</th><th>
Name
</th><th>
MAC
</th><th>
E-Mail
</th><th>
Model
</th><th>
Firmware
</th><th>
Breite / Länge
</th></tr>
</thead>
<tbody id="id01"></tbody>
</table>
<script type="text/javascript">
var oOrtsfilter = document.getElementById('Ortsfilter');
var Ortsfilter = '';
var xmlhttp = new XMLHttpRequest();
var url = "data/nodes.json";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
var NodesData = JSON.parse(response);
var i;
var out = "";
var count = 0;
NodesData.nodes.sort(function(a,b) {
return a["nodeinfo"]["hostname"].localeCompare(b["nodeinfo"]["hostname"]) ;
});
var re = new RegExp(Ortsfilter,"i");
for(i = 0; i < NodesData.nodes.length; i++) {
if ((Ortsfilter == "//i") | ( NodesData.nodes[i].nodeinfo.hostname.search(re) != -1))
{
if ( !((typeof NodesData.nodes[i].nodeinfo.location === 'undefined') || (NodesData.nodes[i].nodeinfo.location === null))) {
lat=NodesData.nodes[i].nodeinfo.location.latitude;
lon=NodesData.nodes[i].nodeinfo.location.longitude;
}
else {
lat = null;
lon = null;
}
linktomap = (lat == null) | (lon == null) ? "" : "<a href=\"map.php?latitude=" + lat + "&longitude=" + lon +"\">" + lat + " - " + lon + "</a>" ;
count++;
out += "<tr><td class=\"ff-td-nummer\">" +
count.toString() +
"</td><td>";
if ( !((typeof NodesData.nodes[i].nodeinfo.hostname === 'undefined') || (NodesData.nodes[i].nodeinfo.hostname === null))) {
out+= NodesData.nodes[i].nodeinfo.hostname ;
}
out += "</td><td>"
if ( !((typeof NodesData.nodes[i].nodeinfo.network.mac === 'undefined') || (NodesData.nodes[i].nodeinfo.network.mac === null))) {
out+= NodesData.nodes[i].nodeinfo.network.mac ;
}
out += "</td><td>";
if ( !((typeof NodesData.nodes[i].nodeinfo.owner === 'undefined') || (NodesData.nodes[i].nodeinfo.owner === null))) {
out += NodesData.nodes[i].nodeinfo.owner.contact ;
}
out += "</td><td>";
if ( !((typeof NodesData.nodes[i].nodeinfo.hardware === 'undefined') || (NodesData.nodes[i].nodeinfo.hardware === null))) {
out += NodesData.nodes[i].nodeinfo.hardware.model;
}
out += "</td><td>";
if ( !((typeof NodesData.nodes[i].nodeinfo.software.firmware === 'undefined') || (NodesData.nodes[i].nodeinfo.software.firmware === null))) {
out += NodesData.nodes[i].nodeinfo.software.firmware.base + "<br />" + NodesData.nodes[i].nodeinfo.software.firmware.release;
}
out += "</td><td>" +
linktomap +
"</td></tr>";
}
}
document.getElementById("id01").innerHTML = out;
}
/* Filter Feld geändert */
oOrtsfilter.onchange = function (e) {
Ortsfilter = oOrtsfilter.value;
myFunction(xmlhttp.responseText);
}
</script>
<hr />
<p>ff-nodetab: Powered by <a href="http://byggvir.de">byggvir.de</a> © 2016 Thomas Arend</p>
</body>
</html>