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

问题描述

我认为下面的代码可以做到，但它给了我一个“类型错误：无法读取未定义的属性‘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();

解决方法

您的 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);
}

,

我进行了一些重构，以便它在堆栈溢出片段中工作。 通常我会使用异步等待而不是承诺，但无法让它们在片段中工作。

如果你想了解更多细节，尽管问。

avg(last_5m):avg:kubernetes.pods.running{environment:develop,kube_service:service} <= 0

function fetchToDos() {
  return new Promise((resolve)=>{
        resolve({
      length: 8,data: [
        {title: 'todo 1'},{title: 'todo 2'},{title: 'todo 3'},{title: 'todo 4'},{title: 'todo 5'},{title: 'todo 6'},{title: 'todo 7'},{title: 'todo 8'},]
    });
    });
};

function getToDos() {
  return new Promise((resolve,reject) => {
    fetchToDos().then(res => {
          if(!res.length){
              console.log('No to-dos addded')
          }
          resolve(res.data);

      }).catch(reject);
  });
    
};

function displayToDos(todos) {
    const ul = document.createElement('ul');

    todos.forEach( ({title}) => {
        const li = document.createElement('li');
        li.classList.add('toDoItem');
        li.innerText = `Title: ${title}`;
        ul.appendChild(li);
    });

    document.body.querySelector('#root').appendChild(ul);
}

getToDos()
  .then( displayToDos )
  .catch( console.error );