【问题标题】:Display nested json objects in html在 html 中显示嵌套的 json 对象
【发布时间】:2019-10-24 10:21:21
【问题描述】:

我想在网页上显示收到的消息。我有一个指向 JSON 文件的 url,数据看起来像这样......

[
    {
      "created_at": "2019-06-08T10:30:52Z",
      "data": {
        "name": "Me",
        "email": "me@example.com",
        "is-org-bedrijf": "on",
        "org-bedrijf": "",
        "onderwerp": "meer info",
        "bericht": "bericht",
        "job-logo-deadline": "",
        "digitaal-deadline": "",
        "drukwerk-deadline": "",
        "flex-floc-kleuren": "transparant",
        "job-flex-floc-deadline": "",
        "andere-beschrijving": "",
        "andere-deadline": "",
        "g-recaptcha-response": ""
      },
      "folder": null,
      "id": 3250210,
      "referrer": "https://lennertderyck.be/contact/form",
      "request_ip": "78.23.211.248",
      "spam": null
    }
]

如何访问 javascript 循环中的信息?显示数据不是问题,而是访问嵌套对象中的数据。

这是我尝试过的

 fetch('file.json')
            .then(function (response) {
                return response.json();
            })
            .then(function (source) {
                appendData(source);
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });
        function appendData(source) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0, il = source.length; i < il; i++) {
                    var div = document.createElement("div");
                    div.innerHTML = 'Id: ' + source[i].id;
                    mainContainer.appendChild(div);
                for (var j = 0; jl = source[i].data.length; j++) {
                    console.log(source[i].data[j].name)
                }
            }
        }

【问题讨论】:

    标签: javascript html arrays json object


    【解决方案1】:

    因为这不是您遍历对象的方式。像这样使用for...in 循环:

    for (var item in source[i].data) {
        console.log(source[i].data[item].name);
    }
    

    【讨论】:

    • 现在我在控制台中得到了 14 次未定义。但是,当我删除名称并仅使用 source[i].data[item] 时,所有数据都会正确显示。
    猜你喜欢
    • 2017-12-02
    • 2015-10-27
    • 2019-07-12
    • 2019-08-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-03
    • 1970-01-01
    相关资源
    最近更新 更多