Помогите найти ошибку в коде
Здравствуйте! Я разбираю программу, которая работает с REST сервисом.
Программа состоит из функций: 1. getAllUsers() - возвращает список всех пользователей в БД. 2. getUserById(id) - возвращает пользователя с переданным id. 3. addUser(name, age) - заносит юзера в БД. 4. removeUser(id) - удаляет юзера из БД по указанному id. Последняя функция не работает. Кнопка "Edit". 5. updateUser(id, user) - должна обновлять данные пользователя по id. Помогите пожалуйста найти ошибку, - уже глаза проглядел все. :-) Буду крайне благодарен!
<div class="container">
<form class="search-form">
<input type="text" name="input-value" placeholder="Enter user id">
<button class="mdc-btn js-post" type="submit">get user by id</button>
<button class="mdc-btn js-post-more" type="submit">get all users</button>
<button class="mdc-btn js-delete" type="submit">delete user</button>
<button class="mdc-btn js-edit" type="submit">edit user</button>
</form>
<p class="result-search-form"></p>
<form class="add-form">
<input class = "name" type="text" name="input-name" placeholder="Enter user name">
<input class = "age" type="text" name="input-value" placeholder="Enter user age">
<button class="mdc-btn js-add" type="submit">add user</button>
</form>
<p class="result-add-form"></p>
</div>
"use strict";
const refs = {
searchForm: document.querySelector(".search-form"),
addForm: document.querySelector(".add-form"),
input: document.querySelector("input"),
postBtn: document.querySelector(".js-post"),
postBtnAll: document.querySelector(".js-post-more"),
btnAdd: document.querySelector(".js-add"),
deleteBtn: document.queryCommandValue(".js-delete"),
resultSearchForm: document.querySelector(".result-search-form"),
inputName: document.querySelector(".name"),
inputAge: document.querySelector(".age"),
btnEdit: document.querySelector(".js-edit"),
baseUrl: "https://test-users-api.herokuapp.com/users/"
}
refs.searchForm.addEventListener('click', searchFormEvent);
function searchFormEvent(evt) {
evt.preventDefault();
let target = evt.target;
if (target.nodeName !== 'BUTTON') return;
switch (true) {
case (target.classList.contains('js-post')):
{
return getUserById();
break
}
case (target.classList.contains('js-post-more')):
{
return getAllUsers();
break
}
case (target.classList.contains('js-delete')):
{
return removeUser();
break
}
}
}
function getAllUsers(evt) {
fetch(refs.baseUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Custom-Header': 'custom value'
}
})
.then(response => {
if (response.ok) return response.json();
throw new Error(`Error while fetching data: ${response.statusText}`);
})
.then(data => updateViewList(data))
.catch(error => console.log("Error: " + error));
}
function getUserById() {
const id = refs.input.value;
fetch(`${refs.baseUrl}${id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-Custom-Header': 'custom value'
}
})
.then(response => {
if (response.ok) return response.json();
throw new Error(`Error while fetching data: ${response.statusText}`);
})
.then(data => {
let user = data.data;
refs.resultSearchForm.innerHTML = `
<p>ID: ${user.id} </p>
<p>Name: ${user.name}</p>
<p>Age: ${user.age}</p>`;
})
.catch(error => console.log("Error: " + error));
}
function removeUser() {
let id = refs.input.value;
fetch(`${refs.baseUrl}${id}`, {
method: "DELETE"
})
.then(response => {
if (response.ok) return response.json();
throw new Error(`Error while fetching data: ${response.statusText}`);
})
.then(data => {
let user = data.data;
refs.resultSearchForm.innerHTML =
`User by ${user.id} has been deleted
<p> Id : ${user.id}</p>
<p> Name : ${user.name}</p>
<p> Age : ${user.age}</p>`
})
.catch(error => console.log("Error: " + error));
}
refs.addForm.addEventListener('click', addFormEvent)
function addFormEvent(evt) {
evt.preventDefault();
let target = evt.target;
if (target.nodeName !== 'BUTTON') return;
switch (true) {
case (target.classList.contains('js-add')):
{
return addUser();
break
}
case (target.classList.contains('js-edit')):
{
return updateUser();
break
}
}
}
function addUser() {
const name = refs.inputName.value;
const age = refs.inputAge.value;
if (name.length < 2 && (age.length !== 0 || age !== string)) return;
fetch(refs.baseUrl, {
method: 'POST',
body: JSON.stringify({
name,
age
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => {
if (response.ok) return response.json();
throw new Error(`Error while fetching data: ${response.statusText}`);
})
.then(data => {
let user = data.data;
refs.resultSearchForm.innerHTML =
`User was adedd
<p> Id : ${user._id}</p>
<p> Name : ${user.name}</p>
<p> Age : ${user.age}</p>`
})
.catch(error => console.log("Error: " + error));
}
function updateUser() {
let id = refs.input.value;
const user = {
name: userName,
age: userAge,
}
fetch(`${refs.baseUrl}${id}`, {
method: "PUT",
body: JSON.stringify(user),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => {
if (response.ok) return response.json();
throw new Error(`Error while fetching data: ${response.statusText}`);
})
.then(data => {
let user = data.data;
refs.resultSearchForm.innerHTML =
`User by ${user.id} has been updated
<p> Id : ${user.id}</p>
<p> Name : ${user.name}</p>
<p> Age : ${user.age}</p>`
})
.catch(error => console.log("Error: " + error));
}
function updateViewList(obj) {
let elem = obj.data;
refs.resultSearchForm.innerHTML = ` <table>
<tr><th>ID</th><th>NAME</th><th>AGE</th></tr>
<tbody></tbody></table>`;
const tbody = document.querySelector('tbody');
elem.map(el => {
let item = `<tr>
<td>${el.id}</td>
<td>${el.name}</td>
<td>${el.age}</td>
</tr>`;
tbody.innerHTML += item;
});
}
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Имя и возраст вводит в поля пользователь, потом они должны подмениться в редактируемом объекте. |
Цитата:
|
Я уже раньше эти значения подставлял в функцию updateUser вместо значений ключей объекта user, но не срабатывает.
Я наверное в синтаксисе ошибку делаю, я не знаю... /* function updateUser() { let id = refs.input.value; // let name = refs.inputName.value; // let age = refs.inputAge.value; const user = { name: refs.inputName.value, age: refs.inputAge.value, } fetch(`${refs.baseUrl}${id}`, { method: "PUT", body: JSON.stringify(user), */ и так: /* function updateUser() { let id = refs.input.value; let name = refs.inputName.value; let age = refs.inputAge.value; // const user = { // name: userName, // age: userAge, // } fetch(`${refs.baseUrl}${id}`, { method: "PUT", body: JSON.stringify(user), headers: { "Content-type": "application/json; charset=UTF-8" } */ |
AndriiS,refs.inputName
так проверьте первый вариант есть ли элемент refs.inputName есть ли значение refs.inputName.value может весь скрипт поставить вниз страницы |
| Часовой пояс GMT +3, время: 01:21. |