Browserfenster und KonsolenausgabeBrowserfenster und Konsolenausgabe


index.html

<!doctype html>
    <html lang="de">
    <head>
        <title>JavaScript loads json file</title>
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script src="js/index.js"></script>
    </head>
    <body onload="loadJSON()">
        <div id="jsonData"></div>
    </body>
</html>

style.css

#jsonData {
    color: grey;
    font-family: courier;
    font-size: 300%;
}

index.js
function loadJSON() { 
    fetch("data/user.json")                 // can be an url
    .then(response => {
        return response.json();
        })
    .then(jsondata => {
        console.log(jsondata)
        appendData(jsondata)
    })
    .catch(err => {
        console.log(err)                    // normally write error not only into console
    });
} 

function appendData(data) {
    var mainContainer = document.getElementById("jsonData");   // find element with id=jsonData
    for (var i = 0; i < data.users.length; i++) {              // loop for getting every object in json list
        var div = document.createElement("div");               // create new div and fill it
        div.innerHTML = 'id:' + data.users[i].id + ' Name: ' + data.users[i].firstName + ' ' + data.users[i].lastName;
        mainContainer.appendChild(div);                        // append div to main container
    }
    console.log(mainContainer)
}


Es gibt mehrere Möglichkeiten, mit JavaScript eine Netzwerkanfrage zu senden und Informationen vom Server zu erhalten.
Die fetch()-Methode ist dabei die modernste und sehr vielseitig:

Die Funktion fetch() gibt ein "Promise"-Objekt (dt. Versprechen) zurück. Ein Promise ist ein Objekt, das die eventuelle Beendigung oder das Scheitern einer asynchronen Operation (Thread) darstellt. Das bedeutet, dass mehrere fetch()-Funktionen angestoßen werden können und eine Webseite so Inhalte quasi "gleichzeitig" (Multithreading) aus mehreren Datenquellen beziehen kann.

Mit der Methode then() wird an das zurückgegebene Promise-Objekt eine sogenannte Callback-Funktion angehängt (anstatt wie sonst üblich, Callback-Funktionen als Parameter an asynchrone Funktionen (Threads) zu übergeben).

So wird nachdem die JSON-Daten aus der Datei abgerufen wurden, die then()-Funktion mit den JSON-Daten in der Antwort (engl. response) ausgeführt.

Eine then()-Methode gibt ihrerseits ein Promise zurück, an das mit then() eine weitere Callback-Funktion angehängt werden kann, die erst nach Beendigung der vorherigen Callback-Funktion ausgeführt wird.

Mehrere Callback-Funktionen werden also verkettet und es wird versprochen (engl. promise), dass die nächste erst nach erfolgreichem Abschluss der vorherigen ausgeführt wird.

Die Methode catch() fängt dabei Exceptions auf, die im Fehlerfall geworfen werden.


Das Multithreading wird im UML-Sequenzdiagramm durch gleichzeitige Abarbeitung dargestellt:


2

PlantUML-Code (generiert von ChatGPT (OpenAI GPT-4.1-mini) am 22.08.2025, basierend auf Nutzer-Prompting)

@startuml
actor Client

participant FetchThread0 #ADD8E6
participant FetchThread1 #90EE90

participant ServerThread0 #ADD8E6
participant ServerThread1 #90EE90

Client [#ADD8E6]--> FetchThread0: fetch()
activate FetchThread0 #ADD8E6

Client [#90EE90]--> FetchThread1: fetch()
activate FetchThread1 #90EE90

FetchThread0 [#ADD8E6]--> ServerThread0: request0
activate ServerThread0 #ADD8E6

FetchThread1 [#90EE90]--> ServerThread1: request1
activate ServerThread1 #90EE90

ServerThread0 [#ADD8E6]--> FetchThread0: response0
destroy ServerThread0

ServerThread1 [#90EE90]--> FetchThread1: response1
destroy ServerThread1

FetchThread0 [#ADD8E6]--> FetchThread0: response0.json() (parse)
FetchThread1 [#90EE90]--> FetchThread1: response1.json() (parse)

FetchThread0 [#ADD8E6]--> Client: appendData(jsondata0)
FetchThread0 [#ADD8E6]--> Client: console.log(jsondata0)
deactivate FetchThread0

FetchThread1 [#90EE90]--> Client: appendData(jsondata1)
FetchThread1 [#90EE90]--> Client: console.log(jsondata1)
deactivate FetchThread1

par Fehlerbehandlung
    group Fehler bei FetchThread0
        FetchThread0 [#ADD8E6]--> Client: catch(err0)
        Client -> Client: console.log(err0)
    end

    group Fehler bei FetchThread1
        FetchThread1 [#90EE90]--> Client: catch(err1)
        Client -> Client: console.log(err1)
    end
end
@enduml







Weitere Informationen:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises?retiredLocale=de


Dateien der Beispiellösung:
https://moodle.eick-at.de/pluginfile.php/1313/mod_page/content/6/JS-loadJsonFile.zip





Last modified: Friday, 22 August 2025, 1:03 PM