javascript api probleme?
Hallo,
guckt euch mal meinen Code an.
JAVASCRIPT:
// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");
// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"
const dataRender = (array) => {
if (array === undefined) {
console.log("Loading results...");
} else {
let dataList = array.map((item) => {
return `
<div class="users">
<p>${item.login}</p>
<button onclick="deleteRequest(${item.id})">Delete</button>
</div>
`;
});
const getHtml = document.getElementById("userTable");
getHtml.innerHTML = dataList.join("");
}
};
const fetchData = async () => {
try {
const response = await fetch(url);
const data = await response.json();
dataRender(data);
} catch (error) {
console.error(error);
}
};
fetchData();
const postRequest = async () => {
const data = {
login: login.value,
password: password.value,
isLogin: false,
};
try {
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
const results = await response.json();
console.log(results.message);
} catch (error) {
console.error(error);
}
};
button.addEventListener("click", postRequest);
const deleteRequest = async (id) => {
try {
const response = await fetch(`${url}/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
}
})
const results = await response.json()
console.log(results.message);
}
catch (error) {
console.error(error);
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD</title>
<script defer src="./script.js"></script>
</head>
<body>
<form>
<input id="loginInput" type="text" placeholder="Login">
<input id="passwordInput" type="password" placeholder="Password">
<button onclick="" id="sendButton">Send</button>
<div id="userTable">
</div>
</form>
</body>
</html>
Mein Ziel:
Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.
Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!
Dankeschön im Voraus!
MfG
MrOsmo
1 Antwort
Wenn ihr auf das button "Send" drückt, (...)
Die Daten werden bereits beim Laden der Seite angefordert (siehe fetchData).
Aber das klappt bei mir die ganze Zeit nicht.
Prüfe die Eingaben (das, was du an die API schickst) und deren Antwort.
Mir fällt beispielsweise auf, dass du in deinem Code auf ein Property namens id zugreifst.
<button onclick="deleteRequest(${item.id})">
Laut CrudCrud-Dokumentation erlangt man jedoch Zugriff auf Einträge über ein vergebenes _id-Property. Es würde mich daher nicht wundern, wenn du derzeit an deine deleteRequest-Funktion durchgehend den Wert undefined übergibst.
Des Weiteren ist die ID ein String. Sie muss dementsprechend in einem String-Literal angegeben werden.
<button onclick="deleteRequest('${item._id}')">
(...) und aus HTML gelöscht werden (...)
Diese Logik ist noch gar nicht implementiert. Entweder du holst dir nach dem Löschen noch einmal alle Daten und überschreibst den Inhalt von userTable erneut oder du hangelst dich ausgehend vom Button zum Itemcontainer und entfernst ihn aus dem DOM.
const deleteRequest = async (deleteButton, id) => {
// delete request ...
const entry = deleteButton.closest(".users");
entry.remove();
}
Bei Aufruf von deleteRequest müsste als erstes Argument this übergeben werden. Dies entspricht dem Buttonelement selbst.
