无法将此 JSON 加载到我的表中

Question

我有一个简单的事情：

有一个带有书籍对象的 JSON，每本书都有标题、作者和年份。 我想从列表中选择一个选项并在表格中显示所选属性。我使用了 W3 中的一个示例，但现在我被卡住了，没有任何效果......

Link's here

function change_myselect(sel) {
    var obj, dbParam, xmlhttp, myObj, x, txt = "";
    obj = { "table":sel, "limit":20 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myObj = JSON.parse(this.responseText);
            txt += "<table border='1'>"
            for (x in myObj) {
                txt += "<tr><td>" + myObj[x].name + "</td></tr>";
            }
            txt += "</table>" 
            document.getElementById("demo").innerHTML = txt;
        }
    };
    xmlhttp.open("GET", "generated.json", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
}

Answer 1

使用调试器行很容易发现问题

console.log(myObj)

它是一个对象，你正试图循环它。您希望循环遍历包含数组的对象中的键。

console.log(myObj.books);

Answer 2

您正在迭代对象中的单个属性 books，而不是迭代该属性包含的数组。

而不是这个：

for (x in myObj) {
  txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}

试试这样的：

myObj.books.forEach((book) => {
  txt += "<tr><td>" + book[sel.toLowerCase()] + "</td></tr>";
});