Objekte in Map speichern (Javascript)?
Hallo hätte eine Frage!
Nämlich möchte ich wissen, wie man mehrere Objekte mit verschiedenen Werten die durch Input Feldern festgelegt worden sind, in eine Map speichert?
Mein Ansatz war schon mal so:
let mymap = new Map()
mymap.set()
Natürlich den Rest mit den Input Feldern und mit dem Objekt habe ich schon. Aber wie man dann genau diese Werte reinspeichert in die Map verstehe ich nicht ganz.
Hoffe jemand kann mir da helfen!
1 Antwort
An sich würde ein FormData-Objekt doch sicherlich ebenfalls passen? Die Werte werden ebenfalls als Key-Value-Paare gespeichert.
Beispiel:
const formElement = document.getElementById("id of form element ...");
const formData = new FormData(formElement);
Zum konkreten Vorgehen mit einem Map-Objekt:
Das Einfügen neuer Werte lässt sich mit der set-Methode regeln. Ihr erstes Argument entspricht dem Schlüsselwert (key), das zweite Argument dem Wert (value).
Beispiel:
const data = new Map();
data.set("Pi", 3.14);
Dein Skript erstellt das Printer-Objekt direkt nach dem Laden des Dokuments. Zu der Zeit sind die Eingabefelder noch leer. Um die Eingaben des Nutzers zu berücksichtigen, musst du auf eine Bestätigung warten, dass Eingaben eingetragen wurden. Das Klickereignis des Buttons stellt so eine Bestätigung dar. Lege das Printer-Objekt erst an, wenn das Klickereignis behandelt wird.
Beachte im Übrigen:
- Es gibt kein Feld namens #currentPaper.
- Deine Variablennamen sind invalid. Entferne die # am Anfang der Namen.
- So lange du nur Plaintext setzt, ist das innerHTML-Property ziemlicher Overhead.
output.textContent += "Eine der Eingaben ist nicht korrekt.";
Hey, habs jetzt probiert, doch es klappt doch nicht.
Bei mir werdend die Werte dich in die Input Felder eingebe plötzlich leer gesetzt (so: ' ') keine Ahnung warum.
Habe hier mal den Code geschickt nicht wundern hab unten Funktionen geschrieben die bisschen was überprüfen bevor es reingespeichert wird.
Vielleicht ist es dadurch bisschen besser zu sehen wo der Fehler ist.
class Printer {
#hostName;
#ipAddress;
#macAddress;
#maxPaper;
#model;
#size;
constructor(hostName, ipAddress, macAddress, maxPaper, model, size) {
this.#hostName = hostName;
this.#ipAddress = ipAddress;
this.#macAddress = macAddress;
this.#maxPaper = maxPaper;
this.#model = model;
this.#size = size;
}
get macAddress() {
return this.#macAddress;
}
get maxPaper() {
return this.#maxPaper;
}
get hostName() {
return this.#hostName;
}
get ipAddress() {
return this.#ipAddress;
}
get currentPaper() {
return this.#currentPaper;
}
get model () {
return this.#model;
}
get size () {
return this.#size;
}
}
const myprinters = new Map();
let printer = new Printer (hostName.value, ipAddress.value, macAddress.value, maxPaper.value, model.value, size.value);
btnSave.onclick = function () {
if (checkInput() && checkmaxPaper()) {
myprinters.set(printer.macAddress, printer);
} else {
output.innerHTML += "Einer der Eingaben ist nicht korrekt";
}
};
function checkInput () {
if (hostName.value === "" && ipAddress.value === "" && macAddress.value === "" && model.value === "" && size.value === "") {
return false;
} else {
return true;
}
}
function checkmaxPaper() {
if (maxPaper.value > 0 && maxPaper.value < 20) {
return true;
} else {
return false;
}
}