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

Posted 2023-03-15

【中文标题】检查密钥是不是存在于 JSON 中，然后插入到页面中

【英文标题】：check if key exists in JSON and then insert into the page检查密钥是否存在于 JSON 中，然后插入到页面中

【发布时间】：2018-02-20 15:29:01

【问题描述】：

假设我有一个这样的 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_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_url 用于添加作者URL 如果JSON 文件中不存在名称为author_url 的任何键怎么办？有没有办法添加条件逻辑来检查 JSON 文件中是否存在键？

我正在使用 vanilla javascript，此代码可以转换为 ES6 还是 ES7？

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

【问题讨论】：

它会说未定义，所以只需检查 data[index].author_url 是否未定义

使用内联三元表达式：data[index].name ?数据[索引].name : '';

如果没有 author_url，您可能也不想要任何 <a href...。我只会使用 if，if (thing.author_url) //code to display link

三元组的一个“肮脏”的事情是您的页面仍将呈现该 div 和 h3。要删除它，您需要在此之外添加逻辑。如果您不关心这一点，那么它应该可以工作。

Checking if a key exists in a JavaScript object?的可能重复

【参考方案1】：

如果您不想呈现父标签，请执行以下操作（恕我直言，将逻辑放入函数中）：

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

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

【讨论】：

@RaajNadar 运气好吗？

需要更多帮助，您能否给出将数据存储在 var 中返回数据中的任何想法。这个想法似乎可行，但我有很多键来检查它是否存在，而不是导入它们。

给我一个基本的想法，把返回的数据存储在var中，不要写整个代码，只要给一个sn-p，然后我会给你一个绿色的勾。