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

Posted 2023-03-16

【中文标题】如果 JSON 数据包含未定义，则附加不同的变量

【英文标题】：Append different variable if JSON data contains undefined

【发布时间】：2021-09-12 21:00:40

【问题描述】：

我正在将一个 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。我只是想确保我没有遗漏任何东西。另外，如果有更好的方法来解决这个问题。我觉得它有点“笨拙”，但奇怪的是它似乎在表面上起作用。

【问题讨论】：

要明确，如果f.Hidden 是undefined 附加到el，如果f.Hidden 是true OR @ 987654332@ 追加other - 对吗？

@RoryMcCrossan - 嗯，更像是如果f.Hidden 不返回undefined 然后附加el。否则，如果它确实返回了 not undefined 的内容，则返回其他内容。基本上，当我console.log 从 JSON 中取出内容时，来自f.Hidden 的数据要么有，要么没有。如果不是，那么它会从 JSON 中以 undefined 的形式返回。我知道...这也让我很头疼，这就是我问的原因，哈哈！

【参考方案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。

【讨论】：

明白了，谢谢！是的，我总体上关心的是确保undefined 的验证是正确的（不是你所说的真或假）。但这有助于并清除它。谢谢！