JSON in JavaScript und PHP richtig benutzen

JSON in JavaScript und PHP richtig benutzen

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

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 und Speicherung von JSON an.

{
  "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.

Dein JSON kannst du mit diesem Tool validieren und formatieren.

Da ich hier mehr auf die Verwendung in JavaScript und PHP eingehen möchte, kannst Du dir bei Interesse den genauen Aufbau von JSON in diesem Beitrag anschauen.

JSON in PHP auslesen und speichern

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 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 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:

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:

<?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
?>

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?

JSON von PHP in JavaScript senden

Um Daten clientseitig anzufragen benutze ich gerne jQuery. 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.4.1/jquery.min.js"></script>
    <script>
        $.getJSON('server.php', {}, function(data) {
            console.log(data);
        });
    </script>
</body>

</html>

server.php

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

Die Console Ausgabe sieht wie folgt aus:

JSON Console Log

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

JSON in JavaScript

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

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

var 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.

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

var obj = JSON.parse(json);

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

Die Console 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"}]}

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 recht einfach. Sollten Fragen aufgetaucht sein, bin ich gerne über die Kommentare behilflich! 🙂

NEW 🚀

Schreib einen Kommentar

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