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" : "emilpalm94@gmail.com",
                    "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"
                }
            ]
        }
    ]
}

我希望第一部分打印出来

该网站当前外观的另一张图片： https://gyazo.com/ef4b02c9474f443747df6fcdaf5537b6

我曾经设法用innerHTML打印出来，但是它只是说了不确定的，我不明白为什么。

如何获得名为“信息”的部分以第一个图片的形式打印出来，然后以Li元素形式列出的网站？

谢谢！

编辑：现在如何获取json数组网站进行打印？像图片一样？还可以点击链接吗？

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

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

    }
    printOut();

Answer 1

尝试以下方法：

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

Answer 2

您的代码中没有变量Student。 Student是JSON.parse()变量中从jsonStr返回的对象的属性。所以

此外，Namn属性在Information属性内，您不能跳过它。

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

有关此主题的更多信息，请参见Access / process (nested) objects, arrays or JSON。

访问网站数据类似。由于它包含数组，因此可以在其上循环。

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;

Answer 3

作为我之前编写代码的解释，我认为将onload替换为onreadystatechange，并将if语句替换为if(xhr.readyState == 4 && xhr.status == 200)可以检查ajax消息是否正确发送。解决方案。

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

3 个答案: