JavaScript Server API Hilfe?
Hallo,
meine Aufgabe:
wenn ich zum Beispiel bei login: babyshark2 schreibe und bei password: 123, und dann auf "send" drücke, dann werden ja diese Daten und zusätzlich noch isLogin: false auf Backend Server geschickt. Wenn ich aber beim zweiten Mal nochmal diese inputs mit den gleichen Daten ausfülle (babyshark2, 12) und dann aber auf "login" drücke, dann sollte das Programm zwischen alle Loginnamen genau diesen Loginname (babyshark2) finden, und falls das Passwort auch richtig ist, dann sollte das isLogin: auf true gesetzt werden. Aber ich verstehe gar nicht wie ich das weitermachen soll. Bitte helft mir!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./script.js"></script>
</head>
<body>
<form class="form">
<input id="loginInput" type="text" placeholder="Login">
<input id="passwordInput" type="password" placeholder="Password">
<button id="sendButton">Send</button>
<button id="loginButton">Login</button>
<p class="p">If you want to delete an Item press the button "Delete" twice to confirm it!</p>
<div id="userTable"></div>
</form>
</body>
</html>
JAVASCRIPT IST IN DEN KOMMENTAREN; DA ES HIER NICHT PASST!
MfG
MrOsmo
2 Antworten
Bei jeder Loginanfrage muss erst geprüft werden, ob der Eintrag schon existiert. Das heißt, du musst dir erst alle Einträge holen (GET /login) und anschließend über sie iterieren. Wenn es einen Fund gibt, aktualisierst du dessen isLogin-Property und schickst den Eintrag via PUT-Request (/login/<EntryID>) an den Server. Andernfalls benötigst du einen POST-Request (/login), der den neuen Eintrag speichert.
const data = { login: login.value, isLogin: false, /* etc. */ };
const entries = // fetch entries ...
const existingEntry = entries.find(entry => entry.login === data.login);
if (existingEntry) {
existingEntry.isLogin = true;
// update with PUT request ...
}
else {
// POST data ...
}
JavaScript
// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");
const loginButton = document.getElementById("loginButton");
// FETCH
const url = "https://crudcrud.com/api/ebf57bbd269048e3ac7cacf52f6ac53f/todos";
const dataRender = (array) => {
const getHtml = document.getElementById("userTable");
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>
`;
});
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();
// POST_REQUEST
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);
fetchData();
} catch (error) {
console.error(error);
}
};
button.addEventListener("click", () => {
postRequest();
});
// DELETE_REQUEST
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);
fetchData();
} catch (error) {
console.error(error);
}
};
//GETLOGGEDIN
const getLoggedIn = async () => {
try {
const response = await fetch (`${url}/getLoggedIn`, {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
const results = await response.json()
console.log(results.message);
}
catch (error) {
console.error(error);
}
}
//UPDATEISLOGIN
const updateIsLogin = async (value) => {
const data = {
isLogin: value
}
try {
const response = await fetch (`${url}/updateIsLogin`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
const results = await response.json()
console.log(results.message);
}
catch (error) {
console.error(error);
}
}
// LOGIN_REQUEST
const loginRequest = async () => {
const data = {
login: login.value,
password: password.value,
};
try {
const response = await fetch(`${url}/login`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
const results = await response.json();
console.log(results.message);
if (results.success) {
await updateIsLogin(true);
getLoggedIn()
}
} catch (error) {
console.error(error);
}
};
loginButton.addEventListener("click", () => {
loginRequest();
});