Schlagwort: Daten

Verwendung von JSON-Daten innerhalb einer JavaScript-Anwendung

JSON (JavaScript Object Notation) in ein kompaktes Datenformat, mit dem komplexe Datenstrukturen abgebildet und zwischen Anwendungen ausgetauscht werden können. JSON erfreut sich zunehmender Beliebtheit, da im Vergleich zu XML weniger Verwaltungsdaten (Overhead) benötigt werden. In diesem Artikel stelle ich kurz vor, wie JSON innerhalb einer JavaScript-Anwendung verwendet werden kann.

Zunächst zeige ich die manuelle Erstellung eines JSON-Objektes. Im Anschluss gebe ich ein Beispiel dafür, wie ein JSON-Objekt durch die Instanziierung einer JavaScript-Klasse erzeugt werden kann. Im letzten Beispiel wird das JSON-Objekt durch Parsen eines JSON-Strings erzeugt.

Eine allgemeine Beschreibung des JSON-Formates ist auf JSON.org zu finden. Zudem wird in zahlreichen Artikeln auf StackOverflow das Thema JSON behandelt (JSON valid chars, Illegal characters in object or JSON key, Are there limitations for key names in JSON-files?).

Manuelle Erstellung

Im folgenden wird zunächst ein JSON-Objekt (manuell) erzeugt.
Mit Hilfe der Ausgabe-Funktion (ausgabe()) soll der Zugriff auf die einzelnen Teile des Objektes demonstriert werden.

Hinweis: ich verwende generell den UTF-8 Zeichensatz. Beim Nachprogrammieren muss dieser eventuell angepasst werden (siehe W3.org).

<html>
<head>
	<title>JavaScript und JSON</title>
	<meta charset="utf-8"/>
</head>
<body>
 
JSON-Demonstration.
<script>
/** Objekt mit dem Namen 'manuell'. */
manuell = {
  name: "Peter",
  tiernamen: ["Bello", "Miezie"],
  /* Felder können weitere Objekte enthalten. */
  auto: {
    /* Benennung der Felder ist Case-sensitiv. */
    SITZE: 4,
    kennzeichen: "A-BC-123"
  }
};
 
/** Ausgabefunktion */
function ausgabe(objekt) {
  alert(
    'Hallo!\n'
    + objekt.name + ' hat ' + objekt.tiernamen.length + ' Haustiere.\n'
    + 'Eines davon heißt: ' + objekt.tiernamen[0] + '.\n'
    + '\n'
    + 'Das Auto hat ' + objekt.auto.SITZE + ' Sitze.\n'
  );
}
 
ausgabe(manuell);
</script>
 
</body>
</html>

Objektoreintierte Programmierung in JavaScript

Zunächst werden die JavaScript-Klassen Person und Auto erstellt. Details zur Objektorientierten Programmierung mit JavaScript gibt es auf WebmasterPro.de.

/** Definition der Klassen. */
function Person(name, tiere, auto) {
	this.name      = name;
	this.tiernamen = tiere;
	this.auto      = auto;
}
function Auto(Sitze, Kennzeichen) {
	this.SITZE       = Sitze;
	this.kennzeichen = Kennzeichen;
}

Im Anschluss wird das Objekt instanziiert.

/* Objekt erzeugen. */
klasse = new Person(
             "Gerda",
             ["Fips", "Felix"],
             new Auto(7, "D-EF-456")
         );

Die Ausgabe erfolgt dann über:

ausgabe(klasse);

Parsen eines JSON-Strings

Strings, die ein JSON-Objekt repräsentieren, können mit Hilfe der jQuery-Funktion parseJSON() in ein JSON-Objekt umgeformt werden. Dabei ist zu beachten, dass die Schlüssel (keys) in Anführngszeichen stehen (also: {"name": "Gustav"} anstatt {name: "Gustav"}).

Zunächst muss jQuery in den Quelltext eingebunden werden. Dazu wird folgende Programmzeile innerhalb von <head>...</head> hinzugefügt.

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

Im Anschluss wird der String (hier aus der Variable json) geparst:

json =	'{'
     + '"name": "John",'
     + '"tiernamen": ["Flipper", "Blubb", "Goldie"],'
     + '"auto": {'
       + '"SITZE": 2,'
       + '"kennzeichen": "G-HI-789"'
       + '}'
     + '}';
jquery = jQuery.parseJSON(json);

Die Ausgabe der Daten erfolgt dann über:

ausgabe(jquery);

Abkürzungen in gnuplot

Das Programm gnuplot dient dazu, Daten in einem Koordinatensystem graphisch darzustellen. Gnuplot kann über den Befehl

gnuplot

im interaktiven Modus gestartet werden. Um die Eingabe der Befehle zu beschleunigen, gibt es für häufig verwendete Befehle Kurzschreibweisen. Einige davon sind in der folgenden Tabelle aufgelistet:

Befehl Abkürzung Beispiel
using u, usi plot "file.dat" u 1:2
title t plot 1 t "Linie 1"
with w plot 2 w lines
lines l plot 2 with l
linespoints lp, linesp plot 2 with linesp
linetype lt plot 2 w l lt 3
linecolor lc plot 2 w l lc rgb "#cccccc"
linewidth lw plot 2 w l lw 5
points p plot 2 with p
pointtype pt plot 2 w p pt 6
pointsize ps plot 2 w p ps .5
pointinterval pi ?pointinterval
xrange xr set xr [-5:5]
yrange yr set yr [1:2]
terminal term set term pdf
postscript post set terminal post
output out set out "filename.dat"
replot rep

Weitere Details findest Du in der gnuplot-Dokumentation.