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

Question

在 json2html 中，如果我在模板中定义了 JSON 中不存在的元素，我想 "display: none;" 或更好，只需排除某种方式。

示例模板：

{"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

Answer 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();
   }
 });

我觉得应该可以。

希望对您有所帮助

Answer 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;}

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

json2html how to exclude line when field doesn't exist

html

javascript

jquery

json

json2html