javascript - 从 HTML 网站中的 Json 文件获取和打印信息

Question

我需要创建一个基本网站，我必须在其中打印 Json 文件中的信息。使用 Javascript。

我想要的是结果图片

但我不知道该怎么做，因为我是 Javascript 的初学者。你能帮我吗 ？非常感谢西奥

{
    "number_of_results": 20,
    "results": [
        {
            "name": {
                "first": "Test",
                "last": "Test"
            },
            "date_of_birth": {
                "date": "1985-12-03T02:05:33",
                "age": 36
            },
            "picture": {
                "large": "apple.png",
            },
        },

标签： javascripthtmljson

Answer 1

看来您的数据结构与脚本中的数据结构不太匹配，因此此处的一些更正（来自您的版本）是：

• 更改.firstName为.name.first
• 参考结果数组因此results.name变为results[i].name
• 电子邮件显示未定义，但那是因为它不在数据中（至少在您的示例中没有）
• 图像标签显示正确的来源，但由于这些不是完整的 url，图像可能会出现损坏，直到数据更真实。

以下脚本应同时附加带有名称/电子邮件和图像的 div。

function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.results.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Email: ' + data.results[i].email + ' First Name :' + data.results[i].name.first;
        mainContainer.appendChild(div);
        var img = document.createElement("img");
        img.src = data.results[i].picture.large;
        mainContainer.appendChild(img);
    }
}