json2html如何在字段不存在时排除行答案

【问题标题】：json2html how to exclude line when field doesn't existjson2html如何在字段不存在时排除行
【发布时间】：2016-01-26 21:39:09
【问题描述】：

在json2html 中，如果我在模板中定义了 JSON 中不存在的元素，我想“显示：无；”或者更好，只是以某种方式排除该行。

示例模板：

{"tag":"div","children":[
    {"tag":"div","html":"First Name: ${first_name}"},
    {"tag":"div","html":"Middle Name: ${middle_name}"},
    {"tag":"div","html":"Last Name: ${last_name}"}
]}

结果：

First Name: John
Middle Name: 
Last Name: Doe

如果 json 中不存在中间名，我不希望它具有中间名的 <div> 条目，而是跳过该行。

我想要什么：

First Name: John
Last Name: Doe

【问题讨论】：

您需要javascript或jquery代码吗？？
我想我需要在模板中添加一些内容，这在其他帮助问题中看起来像 javascript。 json2html 本身使用 jquery，因此如果它更容易，也可以使用它。示例：stackoverflow.com/questions/20847085/… 也许我在这个问题中添加了太多标签，应该将其限制为 json2html。

标签： javascript jquery html json json2html

【解决方案1】：

一种方法是：

让 div 有 ids/classes，我建议你以这种格式更改模板布局：

{"tag":"div","class":"container","children":[
  {"tag":"div","class":"field","children":[
      {"tag":"span", "html":"First Name:"},
      {"tag":"span","html":"${first_name}"}
    ]
  },
  {"tag":"div","class":"field","children":[
      {"tag":"span", "html":"Middle Name:"},
      {"tag":"span","html":"${middle_name}"}
    ]
  },
  {"tag":"div","class":"field","children":[
      {"tag":"span", "html":"Last Name:"},
      {"tag":"span","html":"${last_name}"}
    ]
  }
]}

处理完之后，你可以写一个像这样的小代码（jquery）：

 $(".container div").each(function(){
   var childs = $(this).children();
   if($(childs[1]).is(":empty")){
     $(this).hide();
   }
 });

我认为应该可以。

希望对你有帮助

【讨论】：

我遇到了 $(childs)[1].is(":empty") 的问题。它给了我一个“TypeError: $(...)[1].is is not a function”。但是 childs[1].innerHTML 似乎有效，所以我能够与之进行比较。谢谢！
另外，由于 json 中的每个对象都会重复模板，因此使用 id 可能不太好。相反，只需要定义容器的类可能是更好的选择。所以 "class":"container"，然后是 $(".container div")。
@JeffG 是的实际上是$(childs[1]) 而不是$(childs)[1]。我更正了解决方案。
确实，$(childs[1]) 修复了它。太好了 :) 只是想知道使用 is(":emtpy") 与 length === 0 或 === "" 有什么区别（准确性/性能/...）？
我不知道答案，但我认为它会检查 div 中是否有任何 HTML 和文本，如果没有，则返回 true。更准确的说是来自css的出处，

【解决方案2】：

您也可以在 json2html 模板中这样做

{"tag":"div","children":[
   {"tag":"div","html":"First Name: ${first_name}"},
   {"tag":"div","html":"Middle Name: ${middle_name}","class":function(){
      if(!this.middle_name) return("hide");
   }},
   {"tag":"div","html":"Last Name: ${last_name}"}]}

然后简单地添加这个 css

.hide {display:none;}

【讨论】：