Как правильно обновить приложение CRUD - PullRequest
Новая
       6

Как правильно обновить приложение CRUD

0 голосов
/ 15 июня 2019

Я работаю над приложением CRUD, использующим webpack в качестве модуля сборки и json: server в качестве имитируемого бэкэнда. Все остальные операции работают отлично, но обновление заполняет поля как неопределенные. Так что, если пост выглядит следующим образом ... 

Post 1

content for post 1

Если я попытаюсь отредактировать его, оно будет отображаться буквально так ... 

Undefined

Undefined

Я не уверен, где я иду не так, но я думаю, что это проблема масштаба. Я либо неправильно ссылаюсь на что-то, либо мне нужно переосмыслить набор фигурных скобок. По крайней мере, я так думаю.

В моем файле http.js запрос put находится в классе HTTP вместе со всеми остальными (post, put, delete, get) 

...
    // Make an HTTP PUT Request
    async put(url, data) {
        const response = await fetch(url, {
            method: 'PUT',
            headers: {
                'Content-type': 'application.json'
            },
            body: JSON.stringify(data)
        });

        const resData = await response.json();
        return resData;
    }

...

Приведенный выше код экспортируется в файл app.js , который обрабатывает функцию отправки сообщения. 

...
function submitPost() {
    const title = document.querySelector('#title').value;
    const body = document.querySelector('#body').value;
    const id = document.querySelector('#id').value;

    const data = {
        title,
        body
    }

    // Validate input
    if (title === '' || body === '') {
        ui.showAlert('Please fill in all fields', 'alert alert-danger');
    } else {
        // Check for ID
        if (id === '') {
            // Create Post
            http.post('http://localhost:3000/posts', data)
                .then(data => {
                    ui.showAlert('Post added', 'alert alert-success');
                    ui.clearFields();
                    getPosts();
                })
                .catch(err => console.log(err));
        } else {
            // Update Post
            http.put(`http://localhost:3000/posts/${ id }`, data)
                .then(data => {
                    ui.showAlert('Post updated', 'alert alert-success');
                    ui.changeFormState('add');
                    getPosts();
                })
                .catch(err => console.log(err));
        }

    }
}
...

Функции пользовательского интерфейса, импортированные из модуля пользовательского интерфейса, работают, насколько я вижу, правильно. getPosts тоже работает, но если необходимо увидеть это или HTML-файл, я буду рад предоставить его. Любая помощь будет принята с благодарностью.

EDIT:

Обновленный файл JSON отображается следующим образом. Сообщение с идентификатором 2 когда-то содержало содержимое, похожее на сообщение после него. 

...
"posts": [
    {
      "id": 2
    },
    {
      "id": 3,
      "title": "Post Three",
      "body": "This is post three."
    },
...

1 Ответ

0 голосов
/ 18 июня 2019

Благодаря @DDupont я смог найти, где я ошибся. Очень простая неосторожная опечатка в заголовках для HTTP-запроса PUT. 

"Content-type": "application.json"

У меня был период там. Это должно было быть ... 

"Content-type": "application/json"
...