+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: fetch und JSON (/showthread.php?tid=2362)
fetch und JSON - mike2707 - 18.05.2023
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!?
Code:
<form><input type="file" id="myFile" onchange="jsonDaten()"></form>Code:
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();
})Code:
{"absender" : [
{
"name": "Mustermann",
"strasse": "Mustermann",
"ort": "Mustermann"
}
],
"empfaenger" : [
{
"anzeigename": "Mustermann",
"firma": "Mustermann",
"abteilung": "Mustermann",
"ansprechpartner": "Mustermann",
"strasse": "Mustermann",
"plz": 11111,
"ort": "Mustermann"
}
]}Gruß
Michael