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
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
