JavaScript Button hinzufügen

Guten Abend

Ich habe ein Problem und zwar möchte ich aus einem JSON file Objekte auslesen und in HTML einer Tabelle hinzufügen, dazu möchte ich noch einen Delete Button in jeder Zeile haben der das jeweilige Objekt löschen kann (über die userId). Es liest meine JSON file immer doppelt ein und der Button wird sofort gedrück also die Methode "deleteUser" wird direkt ausgeführt in der For-Schleife drin. Ich war den ganzen Nachmittag daran an diesem eig. simplen Code aber ich finde den Fehler einfach nicht. Ich hoffe ihr könnt mir meine Augen öffnen und den Fehler den ich übersehe entdecken.

[CODE lang="json" title="data2"][
{
"userId": 2,
"userEmail": "peter",
"userMobile": "efgfr",
"userPassword": "peter",
"userName": "hans",
"authorization": "itResponisble",
"reservationList": []
},
{
"userId": 3,
"userEmail": "roberto@hotmail.com",
"userMobile": "0556742105",
"userPassword": "hans",
"userName": "Roberto",
"authorization": "user",
"reservationList": []
},
{
"userId": 5,
"userEmail": "hans",
"userMobile": "efgfr",
"userPassword": "hanspeter",
"userName": "hans",
"authorization": "itResponisble",
"reservationList": []
}
][/CODE]

[CODE lang="html" title="Userlist"]<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">

<title>UserListService</title>

</head>

<body>
<h1>UserListe</h1>

<div>
<table id="tblUserList">
<thead>
<tr>
<td>UserID</td>
<td>Name</td>
<td>E-Mail</td>
<td>Mobile</td>
<td>Rolle</td>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="UserListJs2.js"></script>
</body>
</html>[/CODE]

[CODE lang="javascript" title="UserlListJs"]//Liste der User anfragen
$(document).ready(function(){

$.getJSON("data2.json").done(handleUsersReply);
});

function handleUsersReply(users){
console.log(users);

$("#tblUserliste tbody").empty();
for(let user of users){
addUserToList(user);
}
}


function addUserToList(user){
let id = user['userId'];
console.log(id);

var newRow = "<tr>";
newRow += "<td>" + user['userId'] + "<td>";
newRow += "<td>" + user['userEmail'] + "<td>";
newRow += "<td>" + user['userMobile'] + "<td>";
newRow += "<td>" + user['authorization'] + "<td>";
newRow += "<td> <button id = 'id'> Delete </button> </td>";
newRow +="</tr>";
$("#tblUserliste tbody").append(newRow);
$("#id").click(deleteUser(id));


}

function deleteUser(id){
console.log("delete" + id);
}[/CODE]

Bild der Ausgabe.PNG
So sieht die aktuelle Ausgabe aus dem Live Server von Visual Studio Code aus. Die Ausgabe "delete" + id sollte jedoch erst passieren wenn ich auf den delete btn drücke.



Danke für eure Hilfe
 

Anhänge

  • Bild der Ausgabe.PNG
    Bild der Ausgabe.PNG
    38,1 KB · Aufrufe: 11
K

kneitzel

Gast
Also ich bin kein JavaScript Experte, aber der Code sieht dubios aus:
a) Wenn ich das richtig verstehe, haben alle Buttons die id "id". Das dürfte so nicht wirklich Sinn ergeben.
b) mit dem $("#id").click(...) rufst Du doch auch direkt die Methode click auf von dem Element. Aber Du willst doch einen Event-Handler haben. EventHandler kannst Du im Button Tag mit OnClick setzen. Also in etwa sowas:
Javascript:
        newRow += "<td>" + user['userId'] + "<td>";
        newRow += "<td>" + user['userEmail'] + "<td>";
        newRow += "<td>" + user['userMobile'] + "<td>";
        newRow += "<td>" + user['authorization'] + "<td>";
        newRow += "<td> <button id = 'u"+ user['userId'] + "' onClick='deleteUser("+ user['userId'] + ")'> Delete </button> </td>";

Das ist jetzt so im Forum geschrieben also kann Tippfehler enthalten. Jeder Button hat damit eine klare id ("u" + userId) und bei onClick wird deleteUser(userId) aufgerufen.

Das generierte HTML kannst Du Dir ja einmal ansehen.

Generell kannst du bei sowas - wenn Du Dir unsicher bist - das HTML erst einmal statisch manuell anlegen und prüfen, so dass Du es richtig hast und die Funktionalität sicher ist. Dann ersetzt Du es nach und nach mit der dynamischen Generierung und schaust, dass wirklich das gewünschte erzeugt wird.
 
Also ich bin kein JavaScript Experte, aber der Code sieht dubios aus:
a) Wenn ich das richtig verstehe, haben alle Buttons die id "id". Das dürfte so nicht wirklich Sinn ergeben.
b) mit dem $("#id").click(...) rufst Du doch auch direkt die Methode click auf von dem Element. Aber Du willst doch einen Event-Handler haben. EventHandler kannst Du im Button Tag mit OnClick setzen. Also in etwa sowas:
Javascript:
        newRow += "<td>" + user['userId'] + "<td>";
        newRow += "<td>" + user['userEmail'] + "<td>";
        newRow += "<td>" + user['userMobile'] + "<td>";
        newRow += "<td>" + user['authorization'] + "<td>";
        newRow += "<td> <button id = 'u"+ user['userId'] + "' onClick='deleteUser("+ user['userId'] + ")'> Delete </button> </td>";

Das ist jetzt so im Forum geschrieben also kann Tippfehler enthalten. Jeder Button hat damit eine klare id ("u" + userId) und bei onClick wird deleteUser(userId) aufgerufen.

Das generierte HTML kannst Du Dir ja einmal ansehen.

Generell kannst du bei sowas - wenn Du Dir unsicher bist - das HTML erst einmal statisch manuell anlegen und prüfen, so dass Du es richtig hast und die Funktionalität sicher ist. Dann ersetzt Du es nach und nach mit der dynamischen Generierung und schaust, dass wirklich das gewünschte erzeugt wird.
Danke viel Mals der Code funktioniert jetzt. Ich hab da wohl was grob verwechselt und ein durcheinander mit den Anführungszeichen.

Danke nochmals und einen schönen Abend
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
T Ich möchte einen Button mit JavaScript ausblenden Angular, React, JQuery - Fragen zu JavaScript 5
J Html Button mit JavaScript ausführen Angular, React, JQuery - Fragen zu JavaScript 5
F Hilfe Button mit Javascript Angular, React, JQuery - Fragen zu JavaScript 2
M fetch - API - Probleme? JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
M JavaScript - Fetch Probleme Angular, React, JQuery - Fragen zu JavaScript 0
M Fetch Probleme - JavaScript? Angular, React, JQuery - Fragen zu JavaScript 1
M JavaScript Hilfe dringend (v.2) Angular, React, JQuery - Fragen zu JavaScript 1
P Cypress Test mit javascript ergibt [object Undefined] Meldung Angular, React, JQuery - Fragen zu JavaScript 0
F Javascript Problem bei mehrere ID's Angular, React, JQuery - Fragen zu JavaScript 7
B JavaScript - Array mit Objekten anhand des Object-keys sortieren Angular, React, JQuery - Fragen zu JavaScript 2
I JavaScript: Array umgekehrt von vorn auffüllen Angular, React, JQuery - Fragen zu JavaScript 7
B Kommunikation zwischen Javascript und Java? Angular, React, JQuery - Fragen zu JavaScript 7
A Problem bei Sortierung von Rechnungsnummern mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 1
B Besseres Arbeitsmanagement bei Javascript Programm? Angular, React, JQuery - Fragen zu JavaScript 19
I Fehler im JavaScript? Angular, React, JQuery - Fragen zu JavaScript 2
B Rich Text Editor With Javascript Angular, React, JQuery - Fragen zu JavaScript 1
B nodeJS JavaScript Object require Angular, React, JQuery - Fragen zu JavaScript 12
Aartiyadav Annotation in Javascript and Typescript Angular, React, JQuery - Fragen zu JavaScript 2
B Javascript Tutorial für DOM Manipulationen? Angular, React, JQuery - Fragen zu JavaScript 0
Q Mit JavaScript Daten aus einer Textdatei verarbeiten Angular, React, JQuery - Fragen zu JavaScript 2
H RegExp in Javascript String Angular, React, JQuery - Fragen zu JavaScript 1
B php Datei in JavaScript öffnen Angular, React, JQuery - Fragen zu JavaScript 9
M Einkaufswagen JavaScript Angular, React, JQuery - Fragen zu JavaScript 4
Zeppi Javascript JSON in ein Array Angular, React, JQuery - Fragen zu JavaScript 1
Cellsplitter Api auslesen und in Json Datei speichen - Javascript (node js) Angular, React, JQuery - Fragen zu JavaScript 10
B DOM Baum in JavaScript document.body.childNodes[1] Angular, React, JQuery - Fragen zu JavaScript 10
Noahscript [Frage]: Wie erstelle ich eine htmlspecialchars_decode mit JavaScript? Angular, React, JQuery - Fragen zu JavaScript 1
A Javascript validateInput Angular, React, JQuery - Fragen zu JavaScript 0
Zeppi Javascript URL als Link Angular, React, JQuery - Fragen zu JavaScript 2
T Javascript x-Axis fortlaufendes Datum eintragen Angular, React, JQuery - Fragen zu JavaScript 0
P Editor- mit javascript Sonderzeichen beim schreiben vorschlagen Angular, React, JQuery - Fragen zu JavaScript 0
Jose Merchan JavaScript and SEO Angular, React, JQuery - Fragen zu JavaScript 0
A Ich habe eine frage zu JavaScript adblock detector? Wenn jemand auf OK Klick soll die Sete neu geladen werden Angular, React, JQuery - Fragen zu JavaScript 1
d.lumpi in javascript input erstellen Angular, React, JQuery - Fragen zu JavaScript 4
Martob282 Belegnummerierungsstempel mit JavaScript erstellen Angular, React, JQuery - Fragen zu JavaScript 34
N Javascript: mehrere Textfelder prüfen ob es sich um eine Zahl handelt und diese zwischen 1 und 49 liegt Angular, React, JQuery - Fragen zu JavaScript 10
S Javascript Canvas RadialGradient -> SVG Gradient Angular, React, JQuery - Fragen zu JavaScript 0
C JavaScript in Siri-Shortcuts zur Webseiten Bedienung Angular, React, JQuery - Fragen zu JavaScript 8
N TypeScript zu JavaScript Angular, React, JQuery - Fragen zu JavaScript 1
M Taste mit Javascript simulieren Angular, React, JQuery - Fragen zu JavaScript 6
B Rauch per Javascript auf Bild packen? Angular, React, JQuery - Fragen zu JavaScript 4
X Ohm Rechner in JavaScript aber was bedeutet Power? Angular, React, JQuery - Fragen zu JavaScript 103
ruutaiokwu JavaScript in Angular 8-Anwendung verwenden Angular, React, JQuery - Fragen zu JavaScript 11
L [JavaScript] Mehrere Variablen für Live-Suche in MySql-DB Angular, React, JQuery - Fragen zu JavaScript 0
D Java Tool um HTML und Javascript zu analysieren Angular, React, JQuery - Fragen zu JavaScript 3
P Hashes in JavaScript Angular, React, JQuery - Fragen zu JavaScript 7
P Zahlen in JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
M Spalte verlinken mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 9
P Angular vor JavaScript lernen? Angular, React, JQuery - Fragen zu JavaScript 1
S Unterstützung in Javascript Angular, React, JQuery - Fragen zu JavaScript 2
W Javascript + couchDB Angular, React, JQuery - Fragen zu JavaScript 2
T Grafische und tabellarische Datendarstellung mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 2
E Javascript wenn Variable aktualisiert wird, dann prüfe Angular, React, JQuery - Fragen zu JavaScript 0
D Javascript um eine Seite in einem PDF Formular ein-/Ausblenden zu lassen Angular, React, JQuery - Fragen zu JavaScript 3
ARadauer JavaScript und replace... Angular, React, JQuery - Fragen zu JavaScript 1
P Richtiges Auslesen von mehreren Daten im JSON Format via JavaScript Angular, React, JQuery - Fragen zu JavaScript 2
n00b4u JavaScript Daten lokal Speichern Angular, React, JQuery - Fragen zu JavaScript 7
C per Javascript auf S4 nach Sensordaten fragen? Angular, React, JQuery - Fragen zu JavaScript 2
B Fehler im JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
C In Wordpress unter Custom-Js mit Javascript den ursprünglichen Code deaktivieren Angular, React, JQuery - Fragen zu JavaScript 0
K Javascript "Bild mit Pfeiltasten automatisch bewegen" HILFE Angular, React, JQuery - Fragen zu JavaScript 0
M Javascript Höhe Angular, React, JQuery - Fragen zu JavaScript 2
N Problem - Google Analytics Tracking Javascript Datei von eigenen Server laden Angular, React, JQuery - Fragen zu JavaScript 1
C Javascript Image.getRGB(x,y) Angular, React, JQuery - Fragen zu JavaScript 1
K Proxy PAC File Javascript Angular, React, JQuery - Fragen zu JavaScript 2
F Von JavaScript "Spaghetticode" zu Backbone.js Angular, React, JQuery - Fragen zu JavaScript 0
H Javascript für wordpress "open new window" Angular, React, JQuery - Fragen zu JavaScript 1
F JavaScript replace funktion Angular, React, JQuery - Fragen zu JavaScript 1
T JavaScript Variable in Klasse ändern Angular, React, JQuery - Fragen zu JavaScript 2
N JavaScript für Touch Devices bei DropDown Menü Angular, React, JQuery - Fragen zu JavaScript 4
T Javascript - Polygon, wieviel % sind gefüllt Angular, React, JQuery - Fragen zu JavaScript 1
K JavaScript Banner Syntax Error Angular, React, JQuery - Fragen zu JavaScript 4
D JavaScript jTable Angular, React, JQuery - Fragen zu JavaScript 2
Fab1 [SUCHE] JavaScript Buch für Umsteiger Angular, React, JQuery - Fragen zu JavaScript 4
T html code per javascript einfügen Angular, React, JQuery - Fragen zu JavaScript 7
nrg RegExp Split \r\n in Javascript Angular, React, JQuery - Fragen zu JavaScript 5
J JavaScript und "import"? Angular, React, JQuery - Fragen zu JavaScript 10
B [Javascript] bytearray to file Angular, React, JQuery - Fragen zu JavaScript 2
L Javascript Maus Funktion Angular, React, JQuery - Fragen zu JavaScript 4
K JavaScript Kontaktformulare Angular, React, JQuery - Fragen zu JavaScript 2
B Javascript popup Angular, React, JQuery - Fragen zu JavaScript 5
D Sontag ? JavaScript fehler ? Angular, React, JQuery - Fragen zu JavaScript 12
L JavaScript for-Schleife Angular, React, JQuery - Fragen zu JavaScript 5
D Nachladen von JavaScript Angular, React, JQuery - Fragen zu JavaScript 7
F JSON Datei in JavaScript einbinden Angular, React, JQuery - Fragen zu JavaScript 1
F Node.js und JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
Chris81T Java <> DWR <> JavaScript/HTML Angular, React, JQuery - Fragen zu JavaScript 2
F Dropdownmenü für JavaScript Angular, React, JQuery - Fragen zu JavaScript 5
F [S] Hilfe beim JavaScript auf Homepage Angular, React, JQuery - Fragen zu JavaScript 4
M JavaScript Objekt .play .reload? Angular, React, JQuery - Fragen zu JavaScript 10
N warum kann ich kein javascript und css in mein html script einbinden Angular, React, JQuery - Fragen zu JavaScript 3
Gossi Frage zu Html (evtl. auch JavaScript?) Angular, React, JQuery - Fragen zu JavaScript 10
L JavaScript Array Angular, React, JQuery - Fragen zu JavaScript 4
C JavaScript: Adresszeile aulesen wenn, dann Angular, React, JQuery - Fragen zu JavaScript 6
C Daten von Java an Javascript übergeben möglich? Angular, React, JQuery - Fragen zu JavaScript 5
K JavaScript tooltip-Frage Angular, React, JQuery - Fragen zu JavaScript 8
P Javascript auf Website aufrufen Angular, React, JQuery - Fragen zu JavaScript 5
P Javascript geht nur offline im safari - online läuft es nicht!? Angular, React, JQuery - Fragen zu JavaScript 3
H JavaScript-Umsetzung Angular, React, JQuery - Fragen zu JavaScript 3
M Hyperlink in JavaScript Angular, React, JQuery - Fragen zu JavaScript 4

Ähnliche Java Themen

Neue Themen


Oben