Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите найти ошибку в коде (https://javascript.ru/forum/misc/75832-pomogite-najjti-oshibku-v-kode.html)

AndriiS 10.11.2018 13:43

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

рони 10.11.2018 14:10

Цитата:

Сообщение от AndriiS
updateUser(id, user)

что такое userName строка 159

AndriiS 10.11.2018 14:45

Цитата:

Сообщение от рони (Сообщение 498238)
что такое userName строка 159

User по условию объект с полями name и age. При редактировании туда должны подставиться новые значения.

рони 10.11.2018 15:46

Цитата:

Сообщение от AndriiS
При редактировании туда должны подставиться новые значения.

так подставьте эти новые значения :-? userName из чего возникает у вас?

AndriiS 10.11.2018 15:56

Цитата:

Сообщение от рони (Сообщение 498241)
так подставьте эти новые значения :-? userName из чего возникает у вас?

Вопрос "из чего возникает?", если я вопрос правильно понял:

Имя и возраст вводит в поля пользователь, потом они должны подмениться в редактируемом объекте.

рони 10.11.2018 15:58

Цитата:

Сообщение от AndriiS
Имя и возраст вводит в поля пользователь,

смотрите на строки 128 и 129, и где они в updateUser?

AndriiS 10.11.2018 16:45

Я уже раньше эти значения подставлял в функцию 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"
}
*/

рони 10.11.2018 17:28

AndriiS,refs.inputName
так проверьте первый вариант есть ли элемент refs.inputName есть ли значение refs.inputName.value
может весь скрипт поставить вниз страницы


Часовой пояс GMT +3, время: 04:57.