我以为下面的代码可以做到这一点,但它给了我一个“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();
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);
}