Здравствуйте! Я разбираю программу, которая работает с 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;
});
}
userName из чего возникает у вас?
