Question

我正在尝试从JSON文件中的数组中提取随机项，然后将其打印到DOM中的列表中。我可以使该项目成功地打印到控制台上，甚至发出警报，但是当涉及到将其放入HTML时，它只是显示为未定义。

我尝试使用fetch和.then函数，直到问题出现为止我对此一无所知，以尝试确保在继续操作之前已检索到数据，但这似乎没有任何区别。

const getJ = () => {
  fetch("https://api.myjson.com/bins/r8otf")
  .then(function(response) {
    return response.json(); 
  })
  .then(function(data) {
    let rIndex = Math.floor(Math.random()*data.list.length);
    console.log(data.list[rIndex]);
    return data.list[rIndex];
  })
};

const makeList = function () {
    const results = document.getElementById("resultBox");
    const list = document.createElement("ol")
    list.setAttribute("id", "list")
    const item = document.createElement("li")
    item.appendChild(document.createTextNode(getJ()));
    list.appendChild(item);
    results.appendChild(list);    
};

var btn = document.getElementById("mainButton");
btn.addEventListener("click", makeList);

我在这里设置了一支笔来复制问题：https://codepen.io/mashw/pen/oKRZrV

我想要的是打印到控制台的内容，以显示在列表中。

为什么JSON数据出现在控制台中但未在DOM中定义？

0 个答案: