在html中显示嵌套的json对象

Question

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

[

    {

      "created_at": "2019-06-08T10:30:52Z",

      "data": {

        "name": "Me",

        "email": "[e-mail]",

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

                }

            }

        }