Html und JSON?
Hallo ich möchte dass Html daten aus einer JSON datei liest. Ich habe einen Lokalen server gemavht und dieser schein zu funktionieren. Jetzt bekomm ich aber dauerhaft einen fehler von skript content.js was in node.js anscheinend enthalten ist.
content.js:46 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'includes')
at content.js:46:3583387
at l (content.js:46:3032223)
at Generator._invoke (content.js:46:3032011)
at Generator.next (content.js:46:3032652)
at r (content.js:46:3082269)
at s (content.js:46:3082472)
Weiß jemand wie man das fixen kann?
Das ist das HTML skript
<!DOCTYPE html>
<html>
<head>
<title>Daten anzeigen</title>
</head>
<body>
<h1>Personen</h1>
<div id="daten"></div>
<script>
fetch('data.json')
.then(response => response.json())
.then(data => {
const datenDiv = document.getElementById('daten');
if (data && data.personen && Array.isArray(data.personen)) {
data.personen.forEach(person => {
const personDiv = document.createElement('div');
personDiv.innerHTML = `
<h2>${person.name}</h2>
<p>Alter: ${person.alter}</p>
<p>Stadt: ${person.stadt}</p>
`;
datenDiv.appendChild(personDiv);
});
} else {
datenDiv.innerHTML = 'Fehler beim Laden der Daten.';
}
})
.catch(error => {
const datenDiv = document.getElementById('daten');
datenDiv.innerHTML = 'Fehler beim Laden der Daten.';
console.error(error);
});
</script>
</body>
</html>
Sicher dass es die Datei "daten.json" im gleichen Verzeichnis und genau diesem Namen gibt ?
ja
5 Antworten
Schau in die content.js (Zeile 46, wo du die includes-Methode verwendest). Du versuchst auf ein Objekt zuzugreifen, welches nicht definiert wurde / ohne Wert ist.
Den zuvorliegenden Werdegang dieses Objekts bzw. der darauf referenzierenden Variable solltest du verfolgen. Vielleicht hast du irgendwo Tippfehler eingebaut, vielleicht setzt du es in einem bestimmten Programmzweig nicht, o.ä..
In deiner Fehlermeldung steht doch, dass der Fehler schon in den content.js auftritt. Dann schau doch bitte in dieser Datei nach oder poste den Quellcode. Dein HTML mit dem fetch-Script nützt und da erst mal gar nichts.
Hallo ich möchte dass Html daten aus einer JSON datei liest
HTML kann gar nichts lesen
Mit HTML kannst du noch nichtmal etwas programmieren
Was du wohl meinst ist JS
content.js:46 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'includes')
Dies zeigt doch eindeutig dass beim JS etwas schief geht
Du benutzt undefinierte Variablen
Du hast einen Fehler den du erst catchen musst.
Du probierst auf die properties von undefined zuzugreifen, aber undefined hat keine propertie (es ist ja undefined).
HTML kann keine Daten von irgendwo lesen. Dafür wirst du Javascript benutzen müssen.
Niemand kann dir sagen wie du dein Problem behebst ohne deinen Code gesehen zu haben.
Ich glaube dein erstes .then returned keinen wert.
Solltest sowas machen
fetch('data.json')
.then(response => {
if (!response.ok) {
throw new Error("Fehler beim laden der Daten!");
}
return response.json();
})
.then(data => {
...
danke für die antwort aber dann funktioniert es trotzdem nicht.
Das eigentliche JS sieht man hier nicht
Du musst in deinem Browser im Single stehen durch das Script gehen und dann herausfinden woher die undefinierte Variable kommt.
Mit diesem JS Bruchstück in einer HTML Seite kann hier niemand etwas sehen.
Ich glaube dein erstes .then returned keinen wert.
Doch, eine Arrow-Function ohne geschweifte Klammern und nur mit einem Ausdruck liefert diesen Wert auch ohne Return zurück. Deshalb ist:
.then(response => response.json())
… das gleich wie:
.then(response => { return response.json(); })
code ist in der ergänzung drinnen