Javascript 如何将JSON对象加载到select对象中

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

我的HTML代码很简单（不允许按照老师的指示修改）

脚本就是我的问题所在。我们还没有学到任何关于jquery的知识（我相信是包括$symbols的方法吧？），所以我们的老师希望我们找到一种不用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>

var ajax=new-XMLHttpRequest（）；
ajax.onreadystatechange=函数（）{
if（ajax.readyState==4）{
var response=JSON.parse（ajax.responseText）；
var x=document.getElementById（“filterAuthor”）；
for（变量i=0；i

---

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

“它显然不起作用”好吧，那它不起作用呢？控制台上是否有错误？您是否得到无效的

元素？您是否尝试过使用调试器并单步执行调用；这不是您想要的，因为您的数据是Json而不是XML。json存储在哪里，或者您应该如何获取它？它是您当前项目中的静态文件还是可以从API获得？ruby_新手，您的说法不正确，XMLHttpRequest是正确的方法。这个名字只是误导。在这里看一看如何在没有jQuery的情况下使用Ajax加载JSON的示例：Patrick，我在控制台上遇到了错误。无法加载XMLHttpRequestfile:///Users/aelita/Desktop/Winter%20Term%202017/CIS197CSP/Week%208/Homework/Week%208%20Project%20Files/products.json. 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https、chrome扩展资源。（匿名）@index.html:120 index.html:1未捕获的语法错误：JSON.parse（）处的JSON输入意外结束，XMLHttpRequest.ajax.onreadystatechange（index.html:108）处的index.html:120

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

<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>