Я пытаюсь сделать простой список с помощью метода fetch;все запросы работают нормально, чтобы увидеть результаты, я должен обновить веб-сайт, если я пытаюсь добавить функцию updateData, чтобы обещать в add или deleteTask, весь список удваивается.Могу ли я попросить дать подсказку о том, как заставить работать автообновление?Я использую сервер JSON для хранения данных.
function updateData() {
var ul = document.querySelector('.listOfTasks');
fetch('http://localhost:3000/tasks')
.then((res) => res.json())
.then((data) => {
let tasks = '';
data.forEach(function (task) {
tasks +=
`<li class="taskElement" id=${task.id}><input type="checkbox" class="checkbox">
<span class="task"> ${task.name}</span>
<img class="deleteBtn" id=${task.id} src="../assets/trash.png"> </img>
</li>`
})
ul.insertAdjacentHTML('afterBegin', tasks)
})
}
function addTask(e) {
e.preventDefault();
var taskName = document.querySelector('.taskName').value;
var ul = document.querySelector('.listOfTasks');
if (taskName === "") {
alert("Please write something")
} else {
fetch('http://localhost:3000/tasks', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json'
},
body: JSON.stringify({name: taskName})
})
.then((res) => res.json())
}
}
function deleteTask(e) {
e.preventDefault();
if (e.target.className === 'deleteBtn') {
fetch('http://localhost:3000/tasks/' + e.target.id, {
method: 'DELETE',
})
.then((res) => res.json())
.then((data) => console.log(data))
}
}