无法使用ajax将我的json文件输出到html元素中

Question

所以我在这里遇到问题，当我进行控制台检查时，我可以使用console.log将我的json文件打印到控制台中，但现在我试图在页面上打印出来。

我想使用innerHTML将第一个在json内部调用的信息打印到屏幕上，所以它基本上是这样的：

第二部分需要将名为网站的网站打印为ul。

到目前为止这是我的js：

var xhr = new XMLHttpRequest();

xhr.onload = function() {
    if(xhr.status === 200) {
        console.log(xhr.responseText);

        var jsonStr = JSON.parse(xhr.responseText);
        document.getElementById("info").innerHTML += Student[0].Namn + ", ";
    }
};

xhr.open("GET", "student.json", true);
xhr.send(null);

我似乎无法达到我想要的对象并将其打印出来。

这是我的json代码：

{
    "Student": [
        {
            "Information": 
                {
                    "Namn" : "Emil",
                    "Email" : "[email protected]",
                    "City" : "Linköping",
                    "Website" : "http://studenter.miun.se/~empa1600/"
                }

        },
        {
            "Websites": [
                {
                    "Sitename" : "komplett",
                    "SiteURL" : "https://www.komplett.se/",
                    "Description" : "Bra sida för köp av teknik"
                },
                {
                    "Sitename": "Inet",
                    "SiteURL": "https://www.inet.se/",
                    "Description": "Konkurerande sida mot Komplett"
                },
                {
                    "Sitename": "SF",
                    "SiteURL": "https://www.sf.se/",
                    "Description": "När man ska se bio med polaren"
                },
                {
                    "Sitename": "Code Academy",
                    "SiteURL": "https://www.codecademy.com/",
                    "Description": "Lär dig koda"
                },
                {
                    "Sitename": "Miun",
                    "SiteURL": "https://www.miun.se/",
                    "Description": "Här lär vi oss allt"
                }
            ]
        }
    ]
}

我希望第一部分打印出来

我现在看到的另一块网站：qazxsw poi

我曾经管理过一次使用innerHTML进行打印，但它只是说未定义，我不知道为什么。

我怎样才能将名为Information的部分打印出来，就像第一张图片一样，然后是要在Li元素中列出的网站？

谢谢！

编辑：我现在如何才能打印出json数组网站？并且像照片？还这样他们是可点击的链接？

这是我到目前为止所尝试的：

https://gyazo.com/ef4b02c9474f443747df6fcdaf5537b6

Answer 1

试试这个：

function printOut(){
        jsonStr.Student[1].Websites.forEach(w => {
            document.getElementById("sites").innerHTML += w.Sitename + "<br>";
        });

    }
    printOut();

Answer 2

您的代码中没有变量

var xhr = new XMLHttpRequest();

xhr.onreadystatechange= function() {
if(xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);

    var jsonStr = JSON.parse(xhr.responseText);




    document.getElementById("info").innerHTML += Student[0].Namn + ", ";




}
};

xhr.open("GET", "student.json", true);
xhr.send(null);

。 Student是Student返回的对象中的属性，该对象位于JSON.parse()变量中。所以

此外，jsonStr属性在Namn属性，你不能跳过。

所以Information应该是Student[0].Namn。

有关此主题的更多信息，请参阅jsonStr.Student[0].Information.Namn。

要访问网站数据，它是类似的。因为它包含一个数组，你可以循环它。

Access / process (nested) objects, arrays or JSON

Answer 3

作为对我之前编写的代码的解释，我认为用

var l = "<ul>";
jsonStr.Student[1].Websites.forEach(w => {
    l += `<li><a href="${w.SiteURL}">${w.Description}</a></li>`;
});
l += "</ul>";
document.getElementById("sites").innerHTML = l;

替换onload并用onreadystatechange替换你的if语句，它检查ajax消息是否准确发送将是解决方案。