Почему Fetch возвращает пустой объект?

Question

[700Hp]

Пытаюсь написать Туду лист на чистом js и прикрутить к серверу и mysql (исключительно для практики).

Есть некий роут запрос

// Созднаие новой задачи
router.post('/', async (req, res) => {
  try {
    console.log(req.body.title)
    const todo = Todo.create({
      title: req.body.title,
      done: false,
    })
    res.status(201).json({ todo })
  } catch (e) {
    console.log(e)
    res.status(500).json({
      message: 'Server error',
    })
  }
})

Модель туду в базе данных:

const todo = sequelize.define('Todo', {
  id: {
    primaryKey: true,
    autoIncrement: true,
    allowNull: null,
    type: Sequelize.INTEGER,
  },
  title: {
    type: Sequelize.STRING,
    allowNull: null,
  },
  done: {
    type: Sequelize.BOOLEAN,
    allowNull: null,
  },
})

Есть вёрстка html:

<div class="form">
        <div class="form__inner">
          <input
            class="form__input"
            id="input"
            name="title"
            type="text"
            required
          />
          <label class="form__label" for="input"> Enter task name </label>
        </div>
      </div>

    <div class="wrapper">
      <ul id="todos" class="todo"></ul>
    </div>

Есть файл с логикой добавления: Где fetch и возвращает ничего.

const input = document.querySelector('#input')
const todos = document.querySelector('#todos')
let todoList = []

function addTodo() {
  const title = input.value
  if (!title) {
    return
  }

  fetch('/api/todo', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title }),
  })
    .then((res) => res.json())
    .then(({ todo }) => {
      console.log(todo)

      todoList.push(todo)
    })
    .catch((e) => console.log(e))
}

const createTemplate = (item, index) => {
  return `
    <li id="${item.id}" class="todo__item ${item.done ? 'done' : ''}">
    <img class="circle" src="img/${
      item.done ? 'check' : 'circle'
    }.svg" alt="круг" />
    
      
    <div class="todo__item-text">${item.title}</div>
      <button onClick="deleteTask(${index})" class="btn" type="button">
      <img class="todo__close" src="img/close.svg" alt="Удалить" />
    </button>
  </li>
  `
}
const fillHtmlList = () => {
  todos.innerHTML = ''
  if (todoList.length != 0) {
    filterTodos()
    todoList.forEach((item, index) => {
      todos.innerHTML += createTemplate(item, index)
    })
    todoItemElems = document.querySelectorAll('.todo__item')
    counter(todoList)
  }
}
fillHtmlList()

input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    if (!input.value) {
      return
    }
    addTodo()
    fillHtmlList()
    input.value = ''
  }
})

В чём ошибка?
Буду рад развёрнутым ответам. Если ошибки по логике приложения, то в чём?

Answer 1

[Mikhail Osher]

Есть подозрение, что потеряли await

const todo = await Todo.create({
      title: req.body.title,
      done: false,
    })

Comments

[700Hp]

Ха, сработало! Спасибо. Только теперь отображение происходит только со второй задачи. То есть я ввожу: "Купить хлеб", и у меня ничего нет, ввожу "Купить молоко" и он выдаёт "Купить хлеб". Далее пишу что-то ещё и он выводит предыдущие, то есть "Купить молоко". Может знаете в чём проблема?
Хотя в базу данных сохраняет корректно с первого раза!

[Alexandroppolus]

700Hp, оно и понятно: когда приходит ответ сервера, новая тудушка только добавляется в массив, но не перерисовывается.

[700Hp]

Alexandroppolus, поправил, спасибо.