json2html當字段不存在時如何排除行

Question

在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

Answer 1

一種方法是：

讓div具有ID /類，我建議您以以下格式更改模板布局：

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