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
Danke, Jemand auf reddit hat mir noch eine elegantere version gezeigt ohne .then, das mag ich nicht so gerne
einfach ein eigenes await für den response