Question

我的任务是构建一个简单的看板应用程序。条件之一就是要有一个按钮，该按钮可以从外部来源获取一些任务，并将它们与自定义构建的任务一起放入待办事项列表中。我设法成功获取了一些必需的物品，但显示部分无法正常工作。我似乎找不到错误。

我已经尝试了所有调试，但是找不到问题。

我尝试了所有调试方法，但找不到解决方案。

var state = {
  todo: [],
  inprogress: [],
  done: [],
  addItemToState: function(key, item) {
    this[key].push(item)
  },
  deleteItemFromState: function(key, item) {
    this[key] = this[key].filter(element => element.id != item.id);
  },
  moveItemToOtherPanel: function(key1, key2, itemId) {
    var item = state[key1].find(element => element.id == itemId);
    this.deleteItemFromState(key1, item);
    this.addItemToState(key2, item);
  }
};

var url = 'https://jsonplaceholder.typicode.com/todos';

document.addEventListener("DOMContentLoaded", initBoard);

function initBoard() {
  fetchFromLocalStorage();
  initPanel("todo", state.todo);
  initPanel("inprogress", state.inprogress);
  initPanel("done", state.done);
}

function initPanel(key, todoList) {
  var panel = document.getElementById(key);
  if(todoList) {
    for (var i = 0; i < todoList.length; i++) {
      var currentItemObject = todoList[i];
      var newTodoElement = createTodoElement(
        currentItemObject.id,
        currentItemObject.title
      );
      panel.appendChild(newTodoElement);
    }
  }
}

function createTodoElement(id, title) {
  var todoElement = document.createElement("span");
  todoElement.id = id;
  todoElement.draggable = true; // for drag and drop
  todoElement.ondragstart = onDragStart; // for drag and drop
  todoElement.textContent = title;
  return todoElement;
}

function Item(id, title) {
  this.id = id;
  this.title = title;
}

function createNewItem() {
      var title = document.getElementById("new-todo").value;
      var newItem, ID;

      if (state.todo.length > 0) {
        ID = state.todo[state.todo.length - 1].id + 1;
      } else {
        ID = 1;
      }

      newItem = new Item(ID, title);

      state.addItemToState("todo", newItem);

      saveToLocalStorage(state);

      addNewItem("todo", newItem);
}

function addNewItem(list, element) {
  var list = document.getElementById(list);

  var DOMelement = createTodoElement(element.id, element.title);

  list.appendChild(DOMelement);
}

function saveToLocalStorage(obj) {
  localStorage.setItem("stateToDoArr", JSON.stringify(obj.todo));
}

function fetchFromLocalStorage() {
  var arr = JSON.parse(localStorage.getItem("stateToDoArr"));
  if(arr) {
    state.todo = arr;
  } else {
    state.todo = [];
  }
}

function fetchItems () {
  var dataArr = [];
  fetch(url) 
  .then(res => res.json())
  .then((data) => {
    for (var i = 0; i < 10; i++) {
      dataArr.push(data[i]);
    }
  });
  console.log(dataArr);

  addFetchedItems(dataArr);
}

function addFetchedItems(fetchedArray) {
  var newItem;

  for(i = 0; i < fetchedArray.length; i++) {
    newItem = new Item(fetchedArray[i].id, fetchedArray[i].title);
    state.addItemToState("todo", newItem);

    addNewItem("todo", newItem);
  }
}

var addButton = document.getElementById("add-todo");
var fetchButton = document.getElementById("fetchItemsButton");

fetchButton.addEventListener('click', fetchItems);

addButton.addEventListener('click', createNewItem);

它不会引发任何错误，但也不起作用。

在看板项目中显示从JSON获取的数据的问题

0 个答案: