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

Question

我需要创建一个基本网站，我必须在其中打印 Json 文件中的信息。 使用 JavaScript。 对于我想在我的 html 网站上显示的 json 文件中的每个人，此人的图片以及 json 中的链接，以及他的名字和出生日期。

我想要的是，结果的图片，在一个小标题下面：个人信息以及来自 json 的一些信息。

但我不知道该怎么做，因为我是 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",
            },
        },
        {
            "name": {
                "first": "Test1",
                "last": "Test1"
            },
            "date_of_birth": {
                "date": "1999-11-18T20:05:06",
                "age": 33
            },
            "picture": {
                "large": "apple1.png",
            }
         }
}

这是我的 html

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <script type="text/javascript" src = "test.js">
    </script>
</head>

<body>


<div class="album py-5 bg-light">
        <div class="container">
            <br><h1>Persons</h1><br>
            <div class="row">
                <div class="card-group">     
         
                     <div id="myData"></div>
                        

                </div>
            </div>
        </div>
</div>

我试过这个脚本之王，但它不起作用

    fetch('test.json')//file json objects
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.results.length; i++) {
        var img = document.createElement("img");
        img.src = data.results[i].picture.large;
        mainContainer.appendChild(img);
        var div = document.createElement("div");
        div.innerHTML = 'Email: ' + data.results[i].email + ' First Name :' + data.results[i].name.first;
        mainContainer.appendChild(div);
    }
}

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

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

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

问题描述

2 个解决方案

解决方案1
0 2021-11-13 19:20:41

解决方案2
0 2021-11-13 19:23:50

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

问题描述

2 个解决方案

解决方案1 0 2021-11-13 19:20:41

解决方案2 0 2021-11-13 19:23:50

解决方案1
0 2021-11-13 19:20:41

解决方案2
0 2021-11-13 19:23:50