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

【问题标题】：Get and print informations from Json File in HTML website从 HTML 网站中的 Json 文件获取和打印信息
【发布时间】：2021-11-13 18:14:30
【问题描述】：

我需要创建一个基本网站，我必须在其中打印 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",
            },
        },

【问题讨论】：

您需要一个脚本来抓取您想要添加数据的每个 html 元素并将其 innerHTML 设置为数据。您可以使用 document.querySelector 来抓取 html 元素。 developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
StackOverflow 不是供人们向您提供答案的地方。我为你编写这个程序不会帮助你学习。此外，网上有很多关于 Web 开发的教程。快速的谷歌搜索返回了这个sebhastian.com/display-javascript-variable-html，这是一个很好的起点。在你尝试之后，如果你还在挣扎，回来展示你的进步
你的意思是它不起作用？它会引发错误吗？什么都不显示？此外，在您提供的数据中，没有一个对象具有电子邮件属性或电话属性
电子邮件、电话和字符串？请显示这些属性的形状
您的 for 循环尝试使用变量 data 就好像它是一个数组，例如 for (var i = 0; i < data.length; i++) 但它是属性 results 是您的数组，所以它应该是 for (var i = 0; i < data.results.length; i++)并获得像电子邮件这样的属性是data.results[i].email

标签： javascript html json

【解决方案1】：

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

将.firstName 更改为.name.first
引用结果数组，所以results.name 变为results[i].name
电子邮件显示未定义，但那是因为它不在数据中（至少在您的示例中没有）
图片标签显示了正确的来源，但由于这些不是完整的网址，在数据更真实之前，图片可能会出现损坏。

以下脚本应同时附加带有名称/电子邮件和图像的 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);
    }
}

【讨论】：

非常感谢，它工作得很好，但我想在图像下方和名字和姓氏之前添加一个标题，我也想连续打印 3 个结果同一行蚂蚁然后切换到另一行而不是逐行逐行。你明白我的意思吗？
我想在图片之后和下方添加一个标题“个人信息”，然后打印json中的每个信息。
您可以使用createElement 和appendChild 的基本结构添加更多divs 或spans，然后使用CSS 设置样式或按照您想要的方式组织它们。

【解决方案2】：

试试这个：

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?data.results[i].email:'') + ' First Name :' + (data.results[i].name?data.results[i].name.first:'');
        mainContainer.appendChild(div);
    }
}

【讨论】：