JSON

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&auml;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> &copy 2016 Thomas Arend</p>

</body>
</html>

JSON

Einbetten der JSON-Dateien in die Seite

Vollständiges Beispiel

Navigationsmenü

Suche