fetch und JSON

[mike2707]

Hallo Leute,

ich bin der neue und Javascript-Anfänger. Google wußte auch keine Antwort

Hier mein Problem.
Fehlermeldung: Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Wenn ich die Datei direkt anspreche mit fetch("daten.json") funktioniert der Code. Wenn ich über das HTML-Formular gehe und diese Datei auswähle funktioniert es nicht.

Wo ist der Fehler?
Ich denke es hat was mit der Übertragung der Datei via Browser zu tun!?

<form><input type="file" id="myFile" onchange="jsonDaten()"></form>

function jsonDaten() {
    let file = document.getElementById("myFile").files[0];
   



    let optionAbsenderName = "";
    let optionEmpfaengerName = "";

    //fetch("daten.json")
    fetch(file)
    

        .then((response) => { return response.json();})
        
 


        .then((users) => {
            // Absender    
            users.absender.forEach((user) => {
                optionAbsenderName += `<option> ${user.name} </option>`;  // Name des Absenders
                document.getElementById("absender-id").innerHTML = optionAbsenderName;
                

                const ausgewahlterAbsender = document.getElementById('absender-id').selectedOptions[0].value;

                if (ausgewahlterAbsender === user.name) {
                    document.getElementById('absender').innerHTML = user.name + "<br><hr>" + user.strasse + " | " + user.ort;
                }
            })

            // Empfänger
            users.empfaenger.forEach((user) => {

                // Options füllen
                optionEmpfaengerName += `<option> ${user.anzeigename} </option>`;  // Name des Empfängers
                document.getElementById("empfaenger-id").innerHTML = optionEmpfaengerName;

                const ausgewahlterEmpfaenger = document.getElementById('empfaenger-id').selectedOptions[0].value;

                if (ausgewahlterEmpfaenger === user.anzeigename) {
                    if (user.niederlassung) {
                        document.getElementById('empfaenger').innerHTML = `${user.firma} <br> ${user.niederlassung} <br> ${user.abteilung} <br> ${user.ansprechpartner} <br> ${user.strasse} <br> ${user.plz} ${user.ort}`;
                    } else {
                        document.getElementById('empfaenger').innerHTML = `${user.firma} <br> ${user.abteilung} <br> ${user.ansprechpartner} <br> ${user.strasse} <br> ${user.plz} ${user.ort}`;
                    }

                }
            })
        })
}

// Absender
document.getElementById("absender-id").onchange = () => {

    fetch("daten.json")

        .then((response) => { return response.json(); })

        .then((users) => {
            users.absender.forEach((user) => {
                const ausgewahlterAbsender = document.getElementById('absender-id').selectedOptions[0].value;

                if (ausgewahlterAbsender === user.name) {
                    document.getElementById('absender').innerHTML = user.name + "<br><hr>" + user.strasse + " | " + user.ort;
                }
            })
        })
}

// Empängeradressen
document.getElementById("empfaenger-id").onchange = () => {

    fetch("daten.json")

        .then((response) => { return response.json(); })

        .then((users) => {
            users.empfaenger.forEach((user) => {
                const ausgewahlterEmpfaenger = document.getElementById('empfaenger-id').selectedOptions[0].value;

                if (ausgewahlterEmpfaenger === user.anzeigename) {
                    if (user.niederlassung) {
                        document.getElementById('empfaenger').innerHTML = `${user.firma} <br> ${user.niederlassung} <br> ${user.abteilung} <br> ${user.ansprechpartner} <br> ${user.strasse} <br> ${user.plz} ${user.ort}`;
                    } else {
                        document.getElementById('empfaenger').innerHTML = `${user.firma} <br> ${user.abteilung} <br> ${user.ansprechpartner} <br> ${user.strasse} <br> ${user.plz} ${user.ort}`;
                    }
                }
            })
        })
}

document.querySelector(".drucken").addEventListener("click", () => {
    // wenn das Betrefffeld leer, dann wird das Datum ausgeblendet.
    const betreff = document.getElementById("betreff").value;

    if (!betreff) {
        document.getElementById("current_date").style.display = "none";
    }

    window.print();
})

{"absender" : [    
    {
    "name": "Mustermann", 
    "strasse": "Mustermann", 
    "ort": "Mustermann"
    }
],

"empfaenger" : [
    {
    "anzeigename": "Mustermann", 
    "firma": "Mustermann",
    "abteilung": "Mustermann",
    "ansprechpartner": "Mustermann",
    "strasse": "Mustermann",
    "plz": 11111,
    "ort": "Mustermann"
    }
]}

Gruß
Michael