javascript - 如果在 html/javascript 中为空白，如何跳过 json 字段

Question

我正在考虑创建一个基于 json 输入的动态程序。我希望程序显示基于 json 的标题、子标题和选项。有些输入不会被填写。例如：

标题
副标题
选择 1
选择 2
副标题
2 选择 3
选择 4
选择 5

标题 2
选择 6
选择 7
选择 8

标题 3
副标题
3 选择 9
选择 10
选择 11
副标题 4
选择 12
选择 13

var json = {"items": [
 {
   "header": "Cancer",
   "subheader": "",
   "choice1": "",
   "choice2": "",
   "choice3": "",
   "choice4": "",
   "choice5": "",
   "choice6": "",
   "subheader2": "",
   "2choice1": "",
   "2choice2": "",
   "2choice3": "",
   "2choice4": "",
   "2choice5": "",
   "2choice6": "",
   "subheader3": "",
   "3choice1": "",
   "3choice2": "",
   "3choice3": "",
   "3choice4": "",
   "3choice5": "",
   "3choice6": "",
   "subheader4": "",
   "4choice1": "",
   "4choice2": "",
   "4choice3": "",
   "4choice4": "",
   "4choice5": "",
   "4choice6": ""
 },
 {
  "header": "Cardiovascular",
  "subheader": "Arrhythmia",
  "choice1": "",
   "choice2": "",
   "choice3": "",
   "choice4": "",
   "choice5": "",
   "choice6": "",
  "subheader2": "Cardiomyopathy",
   "2choice1": "",
   "2choice2": "",
   "2choice3": "",
   "2choice4": "",
   "2choice5": "",
   "2choice6": "",
  "subheader3": "Heart Failure",
  "3choice1": "",
   "3choice2": "",
   "3choice3": "",
   "3choice4": "",
   "3choice5": "",
   "3choice6": "",
  "subheader4": "Hypertension",
   "4choice1": "",
   "4choice2": "",
   "4choice3": "",
   "4choice4": "",
   "4choice5": "",
   "4choice6": ""
  }
]};

var comorbid = document.getElementsByClassName("conditions")[0];
var items = json.items;
for(var i = 0; i < items.length; i++) {
    var headbutton = document.createElement("button");
    headbutton.innerHTML = items[i].header;
    headbutton.style.background = '#aeafb6';
    comorbid.appendChild(headbutton);

    var subheadbtn = document.createElement("button");
    var subheadbtn2 = document.createElement("button");
    subheadbtn.innerHTML = items[i].subheader;
    subheadbtn2.innerHTML = items[i].subheader2;

    comorbid.appendChild(subheadbtn);
    comorbid.appendChild(subheadbtn2);

}

我已经尝试完全删除选择，我得到一个未定义的按钮或一个没有文本的非常小的按钮。

https://jsfiddle.net/3Lzvjq7w/

标签： javascripthtmljson

Answer 1

像这样的东西？

var comorbid = document.getElementsByClassName("conditions")[0];
var items = json.items;
for(var i = 0; i < items.length; i++) {
    if (items[i].header.length) {
     var headbutton = document.createElement("button");
     headbutton.innerHTML = items[i].header;
     headbutton.style.background = '#aeafb6';
     comorbid.appendChild(headbutton);
    }
    if (items[i].subheader.length) {
      var subheadbtn = document.createElement("button");
      subheadbtn.innerHTML = items[i].subheader;
      comorbid.appendChild(subheadbtn);
    }
    if (items[i].subheader2.length) {
      var subheadbtn2 = document.createElement("button");
      subheadbtn2.innerHTML = items[i].subheader2;  
      comorbid.appendChild(subheadbtn2);
    }
}

如果您不想在标题/子标题为空时显示按钮...