Question

我们说我有一个像这样的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中的最后一个数据没有＆＃34; author_url＆＃34;键值对。不是一切似乎都好吗？

这就是我使用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_url用于添加作者URL如果在JSON文件中不存在名为author_url的任何键，该怎么办？有没有办法添加条件逻辑来检查JSON文件中是否存在密钥？

我正在使用vanilla javascript这段代码可以转换为ES6或ES7吗？

编辑：我不仅要检查密钥是否存在，还要相应地加载元素。

Answer 1

如果您不想渲染父标记，请执行以下操作（更清晰的IMHO将逻辑放入函数中）：

`<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

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

1 个答案: