Javascript 检查JSON中是否存在密钥，然后插入到页面中

假设我有这样一个JSON文件

[
  {
    "id" : 1,
    "name" : "Test 1",
    "author": "John Doe",
    "author_url": "https://example.com/john-doe"
  },
  {
    "id" : 2,
    "name" : "Test 2",
    "author": "Jane Smith",
    "author_url": "https://example.com/jane-smith"
  },
  {
    "id" : 3,
    "name" : "Test 3",
    "author": "Peter Parker",
    "author_url": "https://example.com/parker"
  },
  {
    "id" : 4,
    "name" : "Test 4",
    "author": "Bruce Wayn"
  }
]

请参阅JSON中的最后一个数据，它没有author\u url键值对。直到不是每件事看起来都很好，对吗

这就是我使用ajax调用在页面上插入数据的方式

var req = new XMLHttpRequest();
req.open('GET', document.baseURI + '/test.json');
req.onload = function() {
    var data = JSON.parse(req.responseText), index;

    if (modal.innerHTML === '') {
        // This can be ignored
        // This is a snippet to find which data is to be inserted
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == dataName) {
                index = i;
            }
        }

        // Here is the issue
        var htmlData =
            `<div class="modal">
                <div class="modal-head">
                    <h2>` + data[index].name + `</h2>
                </div>
                <div class="modal-body">
                    <div class="content">
                        <div class="align-center">
                            <h3>` + data[index].name + `</h3>
                        </div>
                        <p class="mt-10 mb-10"><span style="color: black">Author : </span><a class="link-red" href="` + data[index].author_url + `">` + data[index].author + `</a></p>
                    </div>
                </div>
            </div>`;

        modal.innerHTML = htmlData;
    }

}

在上面的代码中，您可以看到data[index].author\u url用于添加authors url。如果JSON文件中不存在任何名为author\u url的键，该怎么办？有没有办法添加条件逻辑来检查JSON文件中是否存在密钥

我使用的是香草javascript，这段代码可以转换成ES6或ES7吗

编辑：

---

我不仅想检查键是否存在，还想相应地加载元素。

如果不想呈现父标记，请执行以下步骤将逻辑放入函数中：

`<div class="modal-body">`
  + addAuthor(data[index]) + 
`</div>`

function addAuthor(dataObject) {
  if (dataObject.author_url) {
    return
    `<div class="content">` +
      `<div class="align-center">` +
      `<h3>` + dataObject.name + `</h3>` +
      `</div>` +
      `<p class="mt-10 mb-10"><span style="color: black">Author : </span><a class="link-red" href="` + dataObject.author_url + `">` + dataObject.author + `</a></p>` +
    `</div>`;
  } else {
    return '';
  }
}

---

如果你想把模态体也去掉，你也可以在函数中包含模态体。只是使用了示例中的内容。HTH

它会说未定义，所以只需检查数据[index].author\u url是否未定义就可以了使用一个内联三元表达式：data[index].name？数据[索引]。名称：；你们可能不想看到三元结构中有一件“脏”的事情，那个就是你们的页面仍然会呈现那个div和h3。要删除它，您需要在它之外添加逻辑。如果你不在乎的话，那么它应该可以工作了。@RaajNadar的可能副本运气好吗？需要更多帮助吗？你能给我一些想法来将数据存储在var中返回的数据中。这个想法似乎可行，但我有很多关键点要检查它是否存在，然后再导入它们。给我一个在var中存储返回数据的基本想法。不要写整个代码，只给出一个片段，然后我会给你绿色的记号。