如果 JSON 数据包含未定义，则附加不同的变量

Question

我正在将一个 excel 文件解析为 JSON，总体上运行良好。但是，如果变量包含来自 JSON 的特定文本，我正试图弄清楚如何附加不同的 HTML。

到目前为止，这是我所拥有的：

/* This is part of the Excel conversion. Added for reference */
var workbook = XLSX.read(bstr, { type: "binary" });
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];

  var jData = XLSX.utils.sheet_to_json(worksheet, { raw: false });

  $.each(jData, function (i, f) {
    var hide = f.Hidden;
    var el =
     "<div class='thing'>" +
      "<h2>" +
      f["First Name"] +
      "&nbsp;" +
      f["Last Name"] +
      "</h2>" +
      "<h3>" +
      f.Title +
      "</h3>" +
      "<p>" +
      f.Comment +
      "</p>" +
      "</div>";
    $(el).appendTo("#wrapper");
  });

但我很好奇的是确保这是有效的：

$.each(jData, function (i, f) {
    var hide = f.Hidden;
    var el =
     "<div class='thing'>" +
      "<h2>" +
      f["First Name"] +
      "&nbsp;" +
      f["Last Name"] +
      "</h2>" +
      "<h3>" +
      f.Title +
      "</h3>" +
      "<p>" +
      f.Comment +
      "</p>" +
      "</div>";
    var other =
     "<div class='thing'>" +
      "<h2>" +
      f["First Name"] +
      "&nbsp;" +
      f["Last Name"] +
      "</h2>" +
      "<h3>" +
      f.Title +
      "</h3><p>Comment Hidden</p></div>";
    if (hide === undefined) {
       $(el).appendTo("#wrapper");
    } else {
      $(other).appendTo("#wrapper");
    }
  });

总体而言，如果 hide 变量从 JSON 数据返回为 undefined，则它似乎在工作，然后从 el 变量附加 HTML 元素。但如果它确实以 not 未定义的形式返回，则附加来自 other 变量的 HTML。我只是想确保我没有遗漏任何东西。另外，如果有更好的方法来解决这个问题。我觉得它有点“笨拙”，但奇怪的是它似乎在表面上起作用。

Answer 1

如果f.Hidden 不返回undefined 则追加el

在这种情况下，您可以使用typeof 来确定@​​987654324@ 值的状态。另请注意，在定义Hidden 属性时，我通过从p 中删除注释文本来避免代码中的重复。

$.each(jData, function(i, f) {
  var $el = $(`<div class="thing"><h2>${f["First Name"]}&nbsp;${f["Last Name"]}</h2><h3>${f.Title}</h3><p>${f.Comment}</p></div>`);
  if (typeof f.Hidden !== 'undefined')         
    $el.find('p').text('Comment hidden');

  $('#wrapper').append($el);
});

这里要注意的一点是，如果 f.Hidden 是 true，这将显示评论 OR false - 这似乎违反直觉。

如果您想在f.Hidden 为undefined 或true 时隐藏评论（这似乎更有意义），代码应如下所示：

$.each(jData, function(i, f) {
  var $el = $(`<div class="thing"><h2>${f["First Name"]}&nbsp;${f["Last Name"]}</h2><h3>${f.Title}</h3><p>${f.Comment}</p></div>`);
  if (f.Hidden || true)
    $el.find('p').text('Comment hidden');

  $('#wrapper').append($el);
});

|| true 会将任何虚假值（例如 undefined）强制转换为 true。