Question

我正在尝试使Axios.get（）将其数据发送到HTML。

我正在制作待办事项应用程序，正如您猜测的那样，在输入字段中输入项目的值后，该页面上便会生成待办事项列表项目（此项目也已保存在MongoDB中）

我想以Todo List项目（带有编辑和删除按钮）的样式显示mongoDB中的每个项目

请问有什么提示吗？


    let taskInput = document.getElementById("new-task");
    let paginationBlock = document.getElementById("pagination");
    let addButton = document.getElementsByTagName("button")[0];
    addButton.setAttribute("id", "add");
    let incompleteTaskHolder = document.getElementById("incomplete-tasks");
    let paginationHolder = document.getElementById("pagination");
    let listItem;
    let label;
    let editButton;
    let deleteButton;
    let editInput;
    let checkBox;
    let pageCount = 1;
    let currentPage = 1;
    let deleteCount = 0;
    let storeData = [{}]
    const setPageCount = () => {
      const items = [...incompleteTaskHolder.children];
      pageCount = Math.ceil(items.length / 5);

    };
    setPageCount();
    const renderPagination = () => {
      const items = [...incompleteTaskHolder.children]
      paginationBlock.innerHTML = "";
      for (let i = 1; i <= pageCount; i++) {
        let pageBtn = document.createElement("button");
        pageBtn.id = "pageBtn";
        pageBtn.addEventListener("click", () => {
          currentPage = i;
          paginationDisplay();
        });

        pageBtn.innerText = i;

        paginationBlock.append(pageBtn);


      }
    };
    const paginationLimit = () => {

      const items = [...incompleteTaskHolder.children];
      if (items.length % 5 === 0) {
        items.style.display = "none";
      }
    };

    const paginationDisplay = () => {
      const items = [...incompleteTaskHolder.children];
      const start = (currentPage - 1) * 5;
      const end = start + 5;
      items.forEach((item, index) => {
        if (index >= start && index < end) {
          item.style.display = "block"; 
        } else {
          item.style.display = "none";

        }
      });
    };

    const sendData = () => {
      let getValue = document.getElementById('new-task').value
      axios.post('http://localhost:3000/add',{
      todo : getValue
    }).then(res => {
      storeData.push({id : res.data._id})
      console.log('res', res);
    }).catch(err => {
      console.log('err',err);
    })
    console.log(storeData)
    }


    const getAll = (data) => {
      axios.get('http://localhost:3000').then(res => {
        incompleteTaskHolder.innerHTML +=res.data
        console.log('res',res.data);
      }).catch(err => {
        console.log('err',err);
      })
    }

    getAll();

    const deleteData = (id) => {
      axios.delete(`http://localhost:3000/delete/${id}`,{
        id : storeData
      }).then(res => {
        console.log('res',res)
      }).catch(err => {
        console.log('err',err)
      })
    };



    let createNewTaskElement = function (taskString) {
      listItem = document.createElement("li");
      checkBox = document.createElement("input");
      label = document.createElement("label");
      editButton = document.createElement("button");
      deleteButton = document.createElement("button");
      editInput = document.createElement("input");
      label.innerText = taskString;
      checkBox.type = "checkbox";
      editInput.type = "text";
      editButton.innerText = "Edit";
      editButton.className = "edit";
      deleteButton.innerText = "Delete";
      deleteButton.className = "delete";
      listItem.appendChild(checkBox);
      listItem.appendChild(label);
      listItem.appendChild(editInput);
      listItem.appendChild(editButton);
      listItem.appendChild(deleteButton);
      return listItem;
    };
    let addTask = function (showData) {
      listItem = createNewTaskElement(taskInput.value);
      document.getElementById("incomplete-tasks").appendChild(listItem);
      bindTaskEvents(listItem, editButton);
      setPageCount();
      renderPagination();
      paginationDisplay();
      sendData();

    };
    let getInput = document.getElementById("new-task");
    getInput.addEventListener("keyup", (event) => {
      if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("add").click();
      }
    });



    let editTask = function () {
      listItem = this.parentNode;
      editInput = listItem.querySelector("input[type=text]");
      label = listItem.querySelector("label");
      containsClass = listItem.classList.contains("editMode");
      if (containsClass) {
        label.innerText = editInput.value;
      } else {
        editInput.value = label.innerText;
        updateData();
      }
      listItem.classList.toggle("editMode");
    };

    let deleteTask = function () {
      listItem = this.parentNode;
      ul = listItem.parentNode;
      ul.removeChild(listItem);
      setPageCount();
      renderPagination();
      paginationDisplay();
      deleteData();

    };

    addButton.onclick = addTask;

    let bindTaskEvents = function (taskListItem) {
      editButton = taskListItem.querySelector("button.edit");
      deleteButton = taskListItem.querySelector("button.delete");
      listItem = taskListItem.querySelector("label");
      addButton = taskListItem.querySelector("button.add");
      listItem.ondblclick = editTask;
      editButton.onclick = editTask;
      deleteButton.onclick = deleteTask;
    };
    for (let i = 0; i < incompleteTaskHolder.children.length; i++) {
      bindTaskEvents(incompleteTaskHolder.children[i]);
    }

Answer 1

假设您收到的项目列表是['todo1', 'todo2' 'todo3']之类的响应。让我知道您的回答是否结构不同。

您可以创建一个将待办事项列表呈现为HTML的函数。

 function createTodoList(todoArr) {

   const container = document.createElement('div');
   const todoList = document.createElement('ul');

   document.getElementsByTagName('body')[0].appendChild(container);

   container.appendChild(todoList);

   todoArr.forEach(function(todo) {

     const listItem = document.createElement('li');

     listItem.textContent = todo;

     todoList.appendChild(listItem);

   });

 }

 // finally call the function with you response.data
 createTodoList(res.data)

如果您收到不同的答复，则可能必须

将Axios.get（）数据发送到HTML

1 个答案: