Titel aus Datenbank anfordern

[ghost]

Hallo,

ich habe überlegt, dass man ja die Daten der einzelnen Bilder in der Collection durchgehen könnte und die Bildtitel raussucht und die dann in HTML mithilfe einer Datalist beim laden der Seite darstellt. Ich weiß aber nicht ob und wie das funktionieren könnte... Sodass dann der Nutzer bei click auf Titel, die Request anhand des Bildtitels abgleicht, welche Daten aus der Datenbank geladen werden und als Response ankommen.

Was ist hier die einfachste und beste Möglichkeit das umzusetzen?

[MarkusDamm]

Hallo Nelly,

die Idee klingt schon mal ganz gut. Welche Daten speichert die Datenbank in jedem Eintrag? Hast du irgendwo schon ein Konzept dazu?

Für mich hört sich deine Beschreibung so an, als würdest du auf jeden Fall Bildtitel und die Informationen zum Bild in einen Eintrag packen, was so gut ist. Auch hört es sich für mich so an, als würdest du erst alle Einträge von der Datenbank anfordern und erstmal nur mit den Titeln arbeiten. An sich hättest du dann schon die Bildinfos, müsstest also nur noch die Infos zum ausgewählten Titel raussuchen und verwenden.

[ghost]

Hallo Markus,

hier das angefangene Konzept... Bildtitel und Bildinformation werden in einem Array gespeichert. Bis jetzt fordere ich noch nichts an. Der Plan ist, dass ich beim Laden alle Bildtitel anfordere und beim auswählen von Titel, die zugehörige Bildinformation.

[MarkusDamm]

Jo so würde es auch gehen. Damit lädst du keine überflüssigen Daten beim Laden herunter. Da musst du aber darauf achten, dass jeder Titel einmalig ist. Auch kann es von der Auswahl bis zur Darstellung des Bildes etwas länger dauern.

Welchen Datentyp hat dein allPictures-Array? Es muss ja ein komplexeres Array sein, damit sowohl Titel als auch Bildinfos zusammen gespeichert werden können. Je nachdem muss auch etwas unterschiedlich auf die Daten zugegriffen werden, funktionieren wird es aber schon.

[ghost]

Über den Datentyp allPictures habe ich mir noch keine Gedanken gemacht. Welcher Typ wäre denn sinnvoll? Und gibt es noch eine Alternative zu diesem Ansatz?

[MarkusDamm]

allPictures sollte ja zum einen einen Text (Bildname) und die Bildinfos (Hintergrundfarbe, die Objekte mit deren Eigenschaften) speichern. Die Bildinfos sind hier der Knackpunkt: während die Hintergrundfarbe mit einer Beschreibung der Farbe (z.B. lightblue) oder auch dem Farbcode (#0000b9) einfach ist, müssen auch die Objekte gespeichert werden. Dafür gibt's verschiedenste Möglichkeiten. Wichtig wäre aber erstmal, welche Infos nötig sind, um ein Objekt zu erstellen. Ich denke, dass eine eindeutige Beschreibung des Objekts und seine Position wichtig wären.

Bei den Alternativen könntest du natürlich auch von der Nutzung des Arrays innerhalb der Collection absehen – die Collection kann immerhin schon selbst mit einem Datenfeld verglichen werden. Statt dann ein Array in deiner Collection zu verwalten könntest du einen Eintrag für ein Bild anlegen. Der Eintrag braucht natürlich auch die zuvor genannten Infos, kommt aber außerdem noch mit einer automatisch erstellten ID. Damit wäre es den Inhalten der Lektion 7 recht ähnlich.

[ghost]

Bildinfos werden wie im Konzept s.o. in ein Array gepusht. Okay verstehe. Was wäre denn der intuitivste Weg?

[ghost]

Hintergrundfarbe wird als Farbwert und Größe als number gepusht. Die Symbole mit Ihrer Klasse als Zeichenkette und Position.

[MarkusDamm]

Genau, du hast dir also schon überlegt, was du wie abschicken lassen willst. Daraus könntest du ableiten, welchen Typ dein Array haben soll. Dafür sollte am besten ein passendes Typescript-Interface genutzt werden.

Die zweite Variante finde ich intuitiver und sinnvoller. Die erste Variante mit einem einziges Array in deiner Collection wäre vergleichbar mit einem einzigen Karton in einem etwas größeren Karton: muss nicht sein.

[ghost]

okay. Ich speichere die Bildinfos als ein Array in der Datenbank ab und den Namen des Bildes separat aber im selben Dokument. Jetzt möchte ich auf alle gespeicherten Bildtitel zugreifen um sie dann beim Laden der Seite anzuzeigen. Ich weiß aber nicht wie ich diese finden kann. Alida und Ich haben es mit collection.find() probiert, hat aber nicht geklappt. pictures.find({"name": 1}) pictures.find({name}) pictures = mongoClient.db("Haushalt").collection("Pictures")

Hat jmd eine Idee wie man das machen könnte?

[JirkaDellOro]

Ich finde die Idee gut, sich zuerst die Titel zu holen und erst auf Nutzerinteraktion das eigentliche Bild. Mit Hilfe der ID, die Markus angesprochen hat, kann man auch Bilder gleichen Names noch technisch unterscheiden (für den Nutzer ist es trotzdem unpraktisch)

Um sich von der Datenbank nur die Titel und/oder die IDs geben zu lassen, nutzt man den zweiten Parameter von find. Das muss ich aber selbst nachschauen. Guckt hier: https://docs.mongodb.com/manual/reference/method/db.collection.find/#db.collection.find der zweite Parameter wird direkt darunter erklärt.

[JirkaDellOro]

Ich habe es mal mit der Mongo-Shell ausprobiert:

> db.Students.find({})
{ "_id" : ObjectId("5ddd12b7a110acf08bf6dba2"), "name" : "Damm", "vorname" : "Markus", "studiengang" : "MKB", "semester" : 3, "matrikel" : 3663 }
{ "_id" : ObjectId("5ddd13aca110acf08bf6dba3"), "name" : "Damm", "vorname" : "Markus", "studiengang" : "MKB", "semester" : 3, "matrikel" : 7117 }
{ "_id" : ObjectId("5ddd13e0a110acf08bf6dba4"), "name" : "Tedesco", "vorname" : "Alicia", "studiengang" : "MKB", "semester" : 2, "matrikel" : 262530 }
{ "_id" : ObjectId("5ddd1460a110acf08bf6dba5"), "name" : "Tedesco", "vorname" : "Emilia", "studiengang" : "NIX", "semester" : 4, "matrikel" : 0 }
> db.Students.find({}, {"name": true})
{ "_id" : ObjectId("5ddd12b7a110acf08bf6dba2"), "name" : "Damm" }
{ "_id" : ObjectId("5ddd13aca110acf08bf6dba3"), "name" : "Damm" }
{ "_id" : ObjectId("5ddd13e0a110acf08bf6dba4"), "name" : "Tedesco" }
{ "_id" : ObjectId("5ddd1460a110acf08bf6dba5"), "name" : "Tedesco" }

Ich würde annehmen, dass es genau so auch aus dem Code heraus funktioniert. Hattet ihr es ausprobiert?

[JirkaDellOro]

Die Node-Treiber-Dokumentation für MongoDB zeigt, dass der zweite Parameter hier noch deutlich mächtiger ist und über einen Schlüssel reduziert wird. Siehe http://mongodb.github.io/node-mongodb-native/3.1/api/Collection.html#find

Für unsere Bedürfnisse brauchen wir die projection, das müsste dann etwa so aussehen:

        .find({}, {projection: {name: true}});

[ghost]

pinkfluffyunicorn-logs-1596200390388.txt

Hallo Jirka, danke für deine Recherche. Leider funktioniert das noch nicht so wie gewollt/ geplant... Woran könnte es liegen? Wir sind ratlos.

[JirkaDellOro]

Dem Log nach zu urteilen kriegst Du ja einen Cursor von der Datenbank. Das bedeutet, dass Daten bereitgestellt wurden und Du mit Hilfe dieses Cursor-Objektes einen Zugang dazu erhältst. Stell' dir das so vor wie einen Lesekopf auf einem Magnetband oder einer Festplatte, den Du über den Daten positionieren und dann Stückchen auslesen kannst. Ich nehme an, dass Du gerade einfach den Cursor ausgegeben hast, also nicht die Daten, sondern den "Lesekopf".

Zum Glück müssen wir aber nicht kompliziert mit diesem Cursor-Objekt hantieren. Schau mal in Lektion 7 ganz unten, da wird bereits darauf hingewiesen. Der Plan war, dass ihr schon bei dieser Hausaufgabe die Probleme erkennt und wir sie lösen können. Das müssen wir nun nachholen.

[ghost]

Wir bekommen nun eine Response, nur nicht das was wir haben wollen...

[JirkaDellOro]

Ach wie wünsche ich mir einen Link...

Wie habt ihr denn den find-Aufruf formuliert?

[ghost]

https://github.com/schneine/EIA2/blob/master/Zauberbild/Server/server.ts https://schneine.github.io/EIA2/Zauberbild/Client/zauberbild.html

[ghost]

[JirkaDellOro]

Lektion 7 nachgeschaut?

[ghost]

Ja haben jetzt auch endlich den richtigen Weg gefunden 😍