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 / class，我建议你改变这种格式的模板布局：

chrome.webRequest.onBeforeRequest.addListener(function(details) {
if (details.tabId == -1) {
    console.log("Skipping request from inactive tab");
    //return;
}

var notInteresting = Object.keys(activeTabs).every(function(key) {
    if (activeTabs[key] == details.tabId) {

        //Search for correct array index to insert trackers
        outerloop:
        for(i = (currentNum); i--; i < (currentNum-10)){
            //If the element doesn't exist
            if(typeof sites[i] !== 'undefined'){
                curNum = i;
                break outerloop;
            }
        }
        //Check for particular trackers on pages
        var s = details.url;
        console.log("1curNum = " + curNum);

        if(typeof trackers[curNum] === 'undefined'){
            trackers[curNum] = '';
        }

        //Code to identify the trakers based on the URL in webrequests
        if(s.indexOf('doubleclick.net') >= 0){
            console.log("Doubleclick Tracker: ", details.url);
            trackers.splice(curNum, 0, trackers[curNum] + ("<br> <b>Doubleclick Tracker: </b>"+ s));
            document.getElementById('tracker' + curNum).innerHTML = trackers[curNum];
        }
        else if(s.indexOf('googleads') >= 0){
            console.log("Google Ads Tracker: ", details.url);
            trackers.splice(curNum, 0, trackers[curNum] + ("<br> <b>Google Ads Tracker: </b>"+ s));
            document.getElementById('tracker' + curNum).innerHTML = trackers[curNum];
        }
        else if(s.indexOf('googlesyndication') >= 0){
            console.log("Google Adsense Tracker: ", details.url);
            trackers.splice(curNum, 0, trackers[curNum] + ("<br> <b>Google Adsense Tracker: </b>"+ s));
            document.getElementById('tracker' + curNum).innerHTML = trackers[curNum];
        }
        else if(s.indexOf('analytics') >= 0){
            console.log("Analytics Tracker: ", details.url);
            trackers.splice(curNum, 0, trackers[curNum] + ("<br> <b>Analytics Tracker: </b>"+ s));
            document.getElementById('tracker' + curNum).innerHTML = trackers[curNum];
        }
        else if(s.indexOf('connect.facebook') >= 0){
            trackers.splice(curNum, 0, trackers[curNum] + ("<br> <b>Facebook Tracker: </b>"+ s));
            document.getElementById('tracker' + curNum).innerHTML = trackers[curNum];
            console.log("Facebook Tracker: ", details.url);
        }
        else if(s.indexOf('scorecardresearch') >= 0){
            trackers.splice(curNum, 0, trackers[curNum] + ("<br> <b>Scorecard Research Tracker: </b>"+ s));
            document.getElementById('tracker' + curNum).innerHTML = trackers[curNum];
            console.log("Scorecard Research Tracker: ", details.url);
        }
        else if(s.indexOf('chartbeat') >= 0){
            trackers.splice(curNum, 0, trackers[curNum] + ("<br> <b>Chartbeat Tracker: </b>"+ s));
            document.getElementById('tracker' + curNum).innerHTML = trackers[curNum];
            console.log("Chartbeat Tracker: ", details.url);
        }
    } else {

    }
});

在处理之后，您可以编写一个小代码（jquery），如下所示：

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

我认为它应该有用。

希望有所帮助

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如何在字段不存在时排除行

2 个答案: