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

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

Post 1

content for post 1

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

Undefined

Undefined

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

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

...
    // 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.info(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.info(err));
        }

    }
}
...

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

Обновлено:

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

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