JavaScript Button hinzufügen

[backyardCoder]

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]


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

 

[kneitzel]

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:

        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.

 

[backyardCoder]

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:

        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