Помогите найти ошибку в коде
Здравствуйте! Я разбираю программу, которая работает с 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, время: 03:03. |