JSON in JavaScript und PHP richtig benutzen

JSON in JavaScript und PHP richtig benutzen Thumbnail
Veröffentlicht am 21. Mai 2019Zuletzt aktualisiert am 4. Juni 2020

JSON ist ein unabdingbarer Teil für Webanwendungen. Hier erfährst Du, wie Du JSON Daten richtig zwischen JavaScript (clientseitig) und PHP (serverseitig) austauschen, speichern und umwandeln kannst.

Anzeige

JSON steht für JavaScript Object Notation und ist ein sehr einfaches und kompaktes Datenformat um Daten zu speichern und zu versenden. Dabei werden häufig Daten zwischen dem Benutzer (Client) und dem Server ausgetauscht. In diesem Beitrag schauen wir uns die Datenübertragung, Speicherung und speziell die Umwandlung von Arrays zu JSON und umgekehrt an.

1. Was ist JSON?

{
  "ceos": [
    {
      "id": "1",
      "name": "Steve Jobs"
    },
    {
      "id": "2",
      "name": "Bill Gates"
    },
    {
      "id": "3",
      "name": "Paul Allen"
    }
  ]
}

Das ist ein Beispiel für JSON. Hier werden in der Kategorie ceos drei Einträge mit den Attributen id und name gespeichert. Diese Struktur erinnert stark an den Aufbau von Multidimensionalen Arrays. Das hat auch einen Grund, denn die Umwandlung zwischen diesen beiden „Datentypen“ funktioniert ziemlich gut.

Damit wir gleich auch ordentlich arbeiten können, hier noch ein JSON Validator, damit Du immer prüfen kannst, ob Du ein valides JSON Format hast. Andernfalls wird es nicht das Ergebnis liefern welches Du erwartest.

JSON Validator

Da wir uns in diesem Artikel hauptsächlich auf die Verwendung – speziell in PHP und JavaScript – kümmern, kannst Du Dir den genauen Aufbau von JSON in diesem Beitrag anschauen, falls Du interessiert bist.

Anzeige

2. JSON in PHP

2.1 Daten auslesen

JSON Daten lassen sich prinzipiell sehr einfach abspeichern. Es genügt eine einfache Textdatei um die Daten dort abzulegen. Wenn es um kleine Datenmengen geht ist das auch eine gängige und gute Lösung. Hat man allerdings viele Daten, oder Daten die dynamisch (wie ein Kontaktformular) hinzukommen, empfiehlt es sich die Daten in einer Datenbank zu speichern.

Wir gehen hier aber mal von kleinen Datenmengen aus und haben serverseitig eine Datei z.B. mit dem Namen storage.json mit folgenden Inhalt (gleicher Inhalt wie das obere Beispiel, nur in minified):

{"heroes":[{"id":"1","name":"Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}

Über die folgenden Zeilen können wir die Datei in PHP einlesen und ausgeben lassen:

<?php 
$file = file_get_contents("storage.json");
print_r($file);
?>

Die unformatierte Ausgabe gibt uns den einfach Textinhalt der Datei aus:

{"heroes":[{"id":"1","name":"Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}

Mit diesen Daten können wir in dieser Form nicht viel anfangen. Wir könnten und einen eigenen Parser schreiben, um sie in ein Objekt oder Array umzuwandeln. Es geht aber deutlich einfacher.

PHP bietet uns nämlich die Funktion json_decode() um den JSON String in ein Objekt umzuwandeln.

<?php 
$file = file_get_contents("storage.json");
$json_decoded = json_decode($file);
print_r($json_decoded);
?>

Der JSON String wurde in ein Objekt umgewandelt und wir können es wie alle anderen Objekte in PHP behandeln. Diese Ausgabe sieht so aus:

Anzeige
stdClass Object
(
    [heroes] => Array
        (
            [0] => stdClass Object
                (
                    [id] => 1
                    [name] => Steve Jobs
                )

            [1] => stdClass Object
                (
                    [id] => 2
                    [name] => Bill Gates
                )

            [2] => stdClass Object
                (
                    [id] => 3
                    [name] => Paul Allen
                )

            [3] => stdClass Object
                (
                    [id] => 4
                    [name] => Sundar Pichai
                )

        )

)

Wie bereits erwähnt können wir nun über normale Objekt Operatoren uns Werte des Objektes ausgeben lassen oder verändern. Es macht also in diesem Fall für uns keinen Unterschied, ob wir ein Array oder eben ein Objekt bekommen.

<?php 
$file = file_get_contents("storage.json");
$json_decoded = json_decode($file);

echo $json_decoded->heroes[0]->name;	// Output: Steve Jobs

$json_decoded->heroes[0]->name = "CEO Steve Jobs";

echo $json_decoded->heroes[0]->name;	// Output: CEO Steve Jobs
?>

2.2 Daten speichern

Wenn wir nun unsere Daten wie gewünscht angepasst haben geht, können wir sie wieder abspeichern.

<?php 
$filename = "storage.json";
$file = file_get_contents($filename);
$json_decoded = json_decode($file);

$json_decoded->heroes[0]->name = "CEO Steve Jobs";

$json_encoded = json_encode($json_decoded);
file_put_contents($filename, $json_encoded);
?>

Da wir den JSON String beim Auslesen dekodiert haben, müssen wir ihn vor dem Speichern wieder kodieren. Das geht in PHP über json_encode(). Das war’s auch schon. Simpel, oder?

3. JSON von JavaScript zu PHP senden (Ajax)

Um Daten clientseitig anzufragen benutze ich gerne jQuery, da ich mir einige Zeilen JavaScript spare. Auch mit anderen Frameworks oder Libraries wie Vue.js können wir das gleiche machen, die entsprechenden Funktionen findest Du in deren Dokus. Hier ein Beispiel, welches eine Ajax-Anfrage an unsere server.php macht und die Daten zurückgeliefert bekommt.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JSON in JavaScript and PHP</title>
</head>
<body>
    <script loading="lazy" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $.getJSON('server.php', {}, function(data) {
            console.log(data);
        });
    </script>
</body>
</html>

Selbstverständlich kannst Du die Daten auch per POST oder GET übertragen.

<?php
// server.php

$file = file_get_contents("storage.json");
exit($file);
?>

Die JavaScript Console Ausgabe sieht wie folgt aus:

Anzeige
JSON Console Log

Damit haben wir auch schon im JavaScript normal Zugriff auf die Daten, welche ursprünglich aus unserer storage.json kommen.

4. JSON in JavaScript

Wenn wir aber einen JSON String in JavaScript haben, können wir ihn über die JSON.parse() Funktion in ein JavaScript Objekt umwandeln. Das sieht so aus:

let json = '{"heroes":[{"id":"1","name":"CEO Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}';

let obj = JSON.parse(json);
console.log(obj);

Die Ausgabe ist mit der Ausgabe aus unserer storage.json identisch.

JSON Console Log

Umgekehrt können wir ein JavaScript Objekt in JSON mit JSON.stringify() umwandeln.

let json = '{"heroes":[{"id":"1","name":"CEO Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}';

let obj = JSON.parse(json);

let jsonAgain = JSON.stringify(obj);
console.log(jsonAgain);

Die Ausgabe ist dann wieder unser JSON String, den wir auch in der Variable json haben.

{"heroes":[{"id":"1","name":"CEO Steve Jobs"},{"id":"2","name":"Bill Gates"},{"id":"3","name":"Paul Allen"},{"id":"4","name":"Sundar Pichai"}]}

5. Fazit

Damit haben wir die wichtigsten JSON Funktionen für JavaScript und PHP besprochen. JSON ist einfach ein sehr einfaches und kompaktes Datenformat. Wie Du nun gesehen hast, ist die Verwendung in JavaScript und PHP auch sehr einfach und intuitiv. Sollten Fragen aufgetaucht sein, bin ich gerne über die Kommentare behilflich! 🙂

Ähnliche Beiträge
NEW 🚀
NEW 🚀
NEW 🚀
Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.