Cannot read property 'length' of undefined

Blade_Morgan

Newbie
Registriert
Nov. 2023
Beiträge
6
Hallo,
ich möchte mit Node.js und Aframe ein Ball Brick Breacker Spiel progammieren. Dabei kommt die Fehlermeldung "Cannot read property 'length' of undefined" bei "> 8| each brick in bricks" raus.
Mit bricks wollte ich in pug eine each-Schleife machen, um Reihen einzubauen. Nebenbei musst eine Tabelle implementiert werden, wo die Verbindung schon in einer separaten Skript schon aufgebaut wird. Bitte auf Bricks konzentrieren, nicht die Datenbank.
Bitte auch bei Aframe und Node.js bleiben.

Javascript:
var express = require("express");
var router = express.Router();
var caesar = require("./caesar");

const bricks = [
    { x: -2, z: -5 },
    { x: 0, z: -5 },
    { x: 2, z: -5 }
];

router.get("/aframe", function (req, res, next) {
    db.query("SELECT * FROM leaderboard ORDER BY score DESC LIMIT 5", (selectErr, results) => {
        if (selectErr) {
            console.error("Fehler beim Abrufen von Daten: ", selectErr);
            res.status(500).send("Interner Serverfehler");
        } else {
            const decryptedResults = results.map(entry => ({
                ...entry,
                name: caesar.decrypt(entry.name, 4),
                lastname: caesar.decrypt(entry.lastname, 4),
            }));
            console.log("Bricks: ", bricks);
            console.log("Decrypted Results: ", decryptedResults);
            
            res.render("aframe", { bricks: bricks, entries: decryptedResults });
        }
    });
});

module.exports = router;

Code:
//Pug
extends layout

block content
  h1 A-Frame Game
  br
  a-scene
    a-entity(id="platform" geometry="primitive: plane; width: 10; height: 10" position="0 0 -5" material="color:red")
    each brick in bricks
      a-entity(geometry="primitive: cylinder; radius: 1; height: 1" position="${brick.x} 1 ${brick.z}" material="color:blue")

    a-entity(id="ball" geometry="primitive: sphere; radius: 0.5" position="0 2 -5" material="color:green")

    a-camera(position="0 1.6 0")

  table
    thead
      th ID
      th Name
      th Lastname
      th Age
      th Score
    tbody
      each entry in entries
        tr
          td= entry.id
          td= decrypt(entry.name, 4)
          td= decrypt(entry.lastname, 4)
          td= entry.age
          td= entry.score
 
bei einer Fehlermeldung wie „Cannot read property 'length'“, dann denke ich zuerst daran, dass die Eigenschaft mit dem Namen „length“ entweder nicht existiert oder eventuell anders geschrieben wird wie zum Beispiel mit großem Anfangsbuchstaben „Length“. Da „bricks“ bei dir ein array beschreibt, kenne ich aus anderen Programmiersprachen die Eigenschaften sehr oft mit großen Anfangsbuchstaben
 
Topinambur schrieb:
bei einer Fehlermeldung wie „Cannot read property 'length'“, dann denke ich zuerst daran, dass die Eigenschaft mit dem Namen „length“ entweder nicht existiert oder eventuell anders geschrieben wird
Generell ja, aber die Fehlermeldung lautet "Cannot read property 'length' of undefined". Das Problem ist also, dass die Variable an sich "nicht definiert ist" (den falschen Typ hat) zu dem Zeitpunkt, wo die Methode length aufgerufen wird. Da der Fehler anscheinend bei each brick in bricks auftritt wird die length Methode vermutlich intern aufgerufen um die explizite Version der for-range Schleife zu bauen. Sprich, bricks ist undefiniert.

Interessant wäre die Ausgabe von console.log("Bricks: ", bricks);. An sich sieht die Übergabe der Variablen an das pug template sowie die Verwendung im template selber ok aus, aber ich habe beide Frameworks noch nie verwendet.
 
Zuletzt bearbeitet:
wie „BeBur“ anmerkte scheint dein pug Template keinen Zugriff auf deine variable „bricks“ zu haben

auf der pugjs Webseite habe ich unter „common mistakes“ folgenden Punkt gefunden:
„If you need to define variables for use in a child template, you can do so a few different ways:
  • Add the variables to the Pug options object, or define them in unbuffered code in a parent template. The child template will inherit these variables.
  • Define the variables in a block in the child template. Extending templates must have at least one block, or it would be empty — just define your variables there.“
Quelle: https://pugjs.org/language/inheritance.html

viel Erfolg und Happy Coding
Grüße T.N.

Ergänzung: https://riptutorial.com/pug/example/29558/server-side-variable-interpolation
 
Zuletzt bearbeitet:
BeBur schrieb:
Generell ja, aber die Fehlermeldung lautet "Cannot read property 'length' of undefined". Das Problem ist also, dass die Variable an sich "nicht definiert ist" (den falschen Typ hat) zu dem Zeitpunkt, wo die Methode length aufgerufen wird. Da der Fehler anscheinend bei each brick in bricks auftritt wird die length Methode vermutlich intern aufgerufen um die explizite Version der for-range Schleife zu bauen. Sprich, bricks ist undefiniert.

Interessant wäre die Ausgabe von console.log("Bricks: ", bricks);. An sich sieht die Übergabe der Variablen an das pug template sowie die Verwendung im template selber ok aus, aber ich habe beide Frameworks noch nie verwendet.
das wundert mich ja. ich habe mit const bricks ein array erstellt mit werten. dennoch ist es undefined.
 
Sicher, dass das die Datei ist, die gerendert wird? Check mal die Routen und die Dateinamen und ob du vllt. ne andere Datei oder ne alte Version rumfliegen hast. ChatGPT ist auch der Meinung, dass der Fehler nicht am von dir geteilten Code liegt:
Es tut mir leid, dass der Fehler weiterhin auftritt. Es sieht so aus, als ob der Fehler nicht im Codeausschnitt liegt, den Sie geteilt haben. Die Pug-Datei, die Sie gepostet haben, zeigt keine Fehler in Bezug auf das Array "bricks".
Es wäre hilfreich, wenn Sie weitere Informationen bereitstellen könnten:
  1. Überprüfen Sie, ob die Node.js-Anwendung korrekt ausgeführt wird und die Route "/aframe" korrekt aufgerufen wird.
  2. Stellen Sie sicher, dass die Pug-Datei, die Sie bearbeiten, die tatsächliche Datei ist, die von Ihrer Node.js-Anwendung gerendert wird, und dass keine Kopie oder Cache-Datei verwendet wird.
  3. Stellen Sie sicher, dass die Pug-Datei und die Node.js-Datei im selben Verzeichnis oder im richtigen Verzeichnispfad sind, damit sie richtig miteinander interagieren können.
  4. Wenn "bricks" in Ihrer Pug-Datei immer noch nicht erkannt wird, können Sie versuchen, die Pug-Datei neu zu kompilieren, indem Sie den Server neu starten oder sicherstellen, dass alle Dateien ordnungsgemäß gespeichert und aktualisiert sind.
Wenn der Fehler weiterhin besteht, sollten Sie weitere Informationen oder den gesamten Code Ihrer Anwendung teilen, damit ich Ihnen besser helfen kann.
 
Tatsächlich ist das nur eine Kopie, bei der ich weitere arbeite. Aber warum sollte daran liegen? Da starte ich npm auf der Kopie weiter.

Edit: Ich habe auf der Originaldatei gearbeitet, daran liegt es nicht.

Allerdings habe ich bricks wieder rausgenommen, da mir auffiel, dass die Datenbankverbindung bzw. -code nicht klappt. Es soll mir einfach nur die simple Tabelle anzeigen. Was mich stutzig macht, es gibt gar keine Daten aus, obwohl die Daten vorhanden sind. Es meckert, dass entry in entries auch undefiniert ist. Dabei ist die Get-Methode genau dasselbe wie für showData (andere Internetseite, es soll nur Tabelle anzeigen). Auch Pug ist dasselbe. showData funktioniert, aframe nicht.

Ich habe auf der Skriptseite database.js folgende Get-Methode eingebaut:
Javascript:
//Datenbankverbindung aufgebaut
router.get("/aframe", function (req, res, next) {
    db.query("SELECT * FROM leaderboard", (selectErr, results) => {
        if (selectErr) {
            console.error("Fehler beim Abrufen von Daten: ", selectErr);
            res.status(500).send("Interner Serverfehler");
        } else {
            res.render("aframe", { entries: results });
        }
    });
});

Pug (dasselbe wie showData):
Code:
extends layout

block content
  h1 Leaderbord
  table
    thead
      tr
        th ID
        th Name
        th Nachname
        th Alter
        th Score
    tbody
      if entries && entries.length > 0
        each entry in entries
          tr
            td= entry.id
            td= entry.name
            td= entry.lastname
            td= entry.age
            td= entry.score
      else
        tr
          td(colspan = "5") Keine Ergebnisse gefunden
  br
  button(type="button" value="back" onclick="history.back()") Zurück
 
Ich rate dir, geh die Fehlersuche schrittweise an. Sind direkt nach dem sql-query die richtigen daten in den variablen? Wenn ja liegt das problem nicht bei der Datenbank. Wird das richtige template/die richtige datei aufgerufen? -> Im Zweifelsfall mal alle anderen Dateien zeitweise entfernen. Besser ist vermutlich, einfach mal ein komplett neues Projekt anzulegen, nur die für das problem relevanten dateien da rein zu kopieren und das zu probieren.

Generell ist immer gut, alle Fehlermeldungen bei Fragen mitzuschicken, auch wenn es dir redundant vorkommt. Auch Dateinamen und Pfade (relativ zum Projekt Wurzelverzeichnis) sind offensichtlich relevant.
Mir erschließt sich auch nicht, was du mit "Originaldatei" und "Kopie" meinst und was du mit "weiter arbeiten" meinst. Zum Helfen braucht man klare Ist-Zustände, genau den Zustand des Projektes während der Fehler auftritt.

Und natürlich alles tatsächlich checken, nicht nur sich "ja klar ist das die richtige Datei, das weiß ich doch, muss ich nicht so genau gucken" denken.
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: abcddcba
Zurück
Oben