Start Webentwicklung JavaScript Archiv nach Kategorie "JSON"

Kategorie: JSON

[JavaScript] JSON-Datei per fetch( ) oder FilePicker laden

Im Beispiel wird eine JSON-Datei eingelesen. Hierzu gibt es zwei Vorgehensweisen:

  1. Zuerst wird versucht die Datei per fetch() zu laden. Herbei kann es zum Fehler „Failed to fetch“ kommen. Die Fehlerursache ist häufig, dass der Browser den Zugriff auf lokale Dateien blockiert oder die Anfrage wegen einer Cross‑Origin‑Policy ablehnt.
  2. Falls fetch( ) fehlschlägt, kann per OpenDialog (FilePicker) lokal eine Datei ausgewählt werden.
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1" />
    <title>JSON-Datei per URL oder lokal laden</title>
    <style>
      #filePicker {
        margin: 8px 0;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="statusText">JSON-Datei laden</div>
      <br />
      <div
        id="filePicker"
        style="display: none">
        <label>JSON-Datei auswählen:</label>
        <input
          type="file"
          id="fileOpenDialog"
          accept=".json" />
      </div>
      <br />
      <div id="fileContentText">-</div>
    </div>

    <script>

      // Datei mit Beispieldaten (URL)
      //const JSON_SRC = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
      // Datei mit Beispieldaten (lokal)
      const JSON_SRC = "MyLocalFile.json";

      // Beispielhafte Weiterverarbeitung der JSON-Daten
      function processJSON(json) {
        if (json != null) {
          document.getElementById("statusText").textContent =
            "JSON-Datei wurde geladen und wird nun weiter verarbeitet.";

          const text = JSON.stringify(json, null, 2);

          document.getElementById("fileContentText").textContent = text;
        }
      }

      document.addEventListener("DOMContentLoaded", () => {
        const txtStatusText = document.getElementById("statusText");

        // erst automatischer Ladevorgang per fetch( ) probieren,
        // bei Fehler Fallback: manueller Datei-Upload
        fetch(JSON_SRC)
          .then((resp) => {
            if (!resp.ok) throw new Error("HTTP " + resp.status);

            // JSON zu Objekt parsen
            return resp.json();
          })
          .then((json) => {
            // ggf. statusText ausblenden
            // txtStatusText.style.display = 'none';

            // JSON verarbeiten
            processJSON(json);
          })
          .catch((err) => {
            txtStatusText.textContent =
              "Fehler beim automatischen Laden: " + err.message;

            // wenn Datei nicht per fetch( ) geladen werden kann,
            // FilePicker anzeigen und dann manuelle Angabe der Datei
            document.getElementById("filePicker").style.display = "block";
          });

        const fileInput = document.getElementById("fileOpenDialog");
        // manueller Datei‑Upload

        fileInput.addEventListener("change", (ev) => {
          const f = ev.target.files && ev.target.files[0];

          if (!f) return;

          const reader = new FileReader();

          reader.onload = function (e) {
            try {
              // JSON zu Objekt parsen
              const json = JSON.parse(e.target.result);

              // ggf. statusText ausblenden
              //document.getElementById('statusText').style.display = 'none';

              // JSON verarbeiten
              processJSON(json);
            } catch (ex) {
              document.getElementById("statusText").textContent =
                "Fehler: Ungültige JSON-Datei.";
            }
          };

          reader.onerror = function () {
            document.getElementById("statusText").textContent =
              "Fehler beim Lesen der Datei.";
          };

          reader.readAsText(f);
        });
      });

    </script>
  </body>
</html>

Links

[JavaScript] String in JSON wandeln

Beispiel 1 (simpel)

// https://javascript.info/json

// JSON-Objekt definieren
let sJSON = '{ "name":"Heinz","age":"56","city":"Hamburg" }';

// JSON-Objekt aus String parsen
let oJSONpar = JSON.parse(sJSON);

// Testausgabe
console.log(oJSONpar.name);

Beispiel 2 (reviver)

// JSON-Objekt definieren
let sJSON = '{ "name":"Heinz","age":"56","city":"Hamburg","birth":"2018-04-25T12:00:00.000Z" }';

// JSON-Objekt aus String parsen
let oJSONpar = JSON.parse(sJSON, function(key, value) {

  // wenn Datumsfeld "birth"
  if (key == 'birth')
  {
      // Datumsobjekt zurückgeben
      return new Date(value);
  }
  else
  {
      return value;
  };
});

// Geburtsdatum ist jetzt vom Typ "Date" mit enspr. Funktionen
console.log(oJSONpar.birth.toLocaleString('de-DE'));

[JavaScript] JSON-Datei per HTTP-Request holen und parsen 

// Link zur JSON-Datei
let sURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
// Request-Object
let request = new XMLHttpRequest();
// MIME-Typen
// txt: "text/plain"
// html: "text/html"
// json: "application/json"
request.overrideMimeType('application/json');
// Requestmethode
request.open('GET', sURL, true);
// Datentyp
request.responseType = 'text';
// Handler für asyncrone Antwort des Requests
// wenn Daten erfolgreich geladen
request.onload = function() {
  console.log('onload()');
  // gesamte Response ausgeben
  let sJSON = request.response;
  console.log(sJSON);
  
  // JSON-Daten parsen
  let oJSON = JSON.parse(sJSON);
  // Wert eines Attributes ausgeben
  console.log(oJSON.homeTown);
};
// bei Änderung des Ready-States
request.onreadystatechange = function () {
  console.log('onreadystatechange()');
  console.log(request.readyState);
  console.log(request.status);
  console.log(request.statusText);
};
// Request absenden
request.send();

Links