Question

我正在尝试将JSON文件中的对象加载到HTML文件中的select标记中。我需要每个对象的“author”属性成为我的select标签中的单独选项。

我在HTML中的代码很简单（根据我老师的指示，我不允许修改它）

<label for="filterAuthor">Author:</label>
<select id="filterAuthor"><option value="">All Authors</option></select>

我的JSON文件中的属性如下所示：

{
    "bookshelf":
    [
        {
            "title":"Ulysses",
            "author":"James Joyce",
            "year":1922,
            "link":"https://smile.amazon.com/Ulysses-Wordsworth-Classics-James-Joyce/dp/1840226358/"
        }, }

脚本是我的问题所在。我们还没有学过任何关于jquery的东西（我相信这是包括$符号的方法？），所以我们的老师希望我们找到一种不使用它的方法。如何从我的JSON文件中获取要加载到脚本中的选项？

<script>
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4) {
            var response = JSON.parse(ajax.responseText);
            var x = document.getElementById("filterAuthor");
            for(var i = 0; i < response.bookshelf.length; i++) {
                var option = document.createElement("option");
                option.text = response.bookshelf[i].author;
                x.add(option);
                }
            }
        }

        ajax.open("GET","products.json");

        ajax.send();
    </script>

我尝试在互联网上寻找答案，这是我认为的最接近的工作。它显然不起作用。有人能帮我吗？

如何将JSON对象加载到选择对象

0 个答案: