提问者:小点点

使用javascript和dom操作动态显示axios get请求的值


我以为下面的代码可以做到这一点,但它给了我一个“TypeError:无法读取未定义的属性'0'”。如何才能显示我的数据?我对javascript还是新手,请保持简单易懂。

// Get todos Function
function getToDos () {
  // Get request
  axios.get("//https:www.apiCall")
  .then(res => {
      // log response
      console.log(res)
      // user creates todos variable
      if(res.length === 0){
        console.log("No to-dos addded")
      }
      const todos = res.data;
      displayToDos(todos); 
  })
  .catch(err => {
      console.log(err)
  })
};


// display todos function
function displayToDos(todos) {

  if(todos.length === 0){
          // Create ul element
  const ul = document.createElement("ul")
} 

  let li =document.createElement("li")
  li.setAttribute("class", "toDoItem");


  for(let i = 0; i < todos.length; i++) {
      // adds text to li element 
      let textContent = document.createTextNode("Title: "+ todos[i].title);

      // Append content to li
      document.li[i].appendChild("textContent");
      document.ul.appendChild(li[i]);
      document.body.appendChild(ul);
  }
}
 
getToDos();



共1个答案

匿名用户

displayToDos方法中有很多错误。它应该是这样的:

function displayToDos(todos) {
  // You have to create an ul element, not only when there are 0 todos.
  const ul = document.createElement("ul");

  for (let i = 0; i < todos.length; i++) {
    // You need to create an li for each todo
    let li = document.createElement("li");
    li.setAttribute("class", "toDoItem");
    let textContent = document.createTextNode("Title: " + todos[i].title);
    li.appendChild(textContent);

    // And add it to the ul
    ul.appendChild(li);
  }

  // Finally, add the ul to your html page.
  document.body.appendChild(ul);
}