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

Question

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

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

header 2
选择6
选择7
选择8

header 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/

Answer 1

由于您的 JSON 结构，检查每个子标题可能会变得困难。您的代码将对每个键进行几乎相同的检查，如下所示。

if (items[i].subheader !== '') {
  // Create button 1
}

if (items[i].subheader2 !== '') {
  // Create button 2
}

if (items[i].subheader3 !== '') {
  // Create button 3
}

if (ite... etc.

现在我并不是说这不起作用，如果您无法更改 JSON，那么这就是实现它的方法。

但是如果您可以更改 JSON，那么您应该通过提供分层结构来重新格式化它，如下例所示。它使您能够在 JSON 中添加或删除项目，而无需破坏任何代码。您不必对 subheader1、subheader2 等遇到的每种可能性进行硬编码，并且可以相当轻松地进行扩展。

查看结果。

var json = [
  {
    "header": "Cancer",
    "contents": [
      {
        "subheader": "",
        "choices": ["", "", "", "", "", ""]
      },
      {
        "subheader": "",
        "choices": ["", "", "", "", "", ""]
      },
      {
        "subheader": "",
        "choices": ["", "", "", "", "", ""]
      },
    ]
  },
  {
    "header": "Cardiovascular",
    "contents": [
      {
        "subheader": "Arrhythmia",
        "choices": ["", "", "", "", "", ""]
      },
      {
        "subheader": "Cardiomyopathy",
        "choices": ["", "", "", "", "", ""]
      },
      {
        "subheader": "Heart Failure",
        "choices": ["", "", "", "", "", ""]
      },
      {
        "subheader": "Hypertension",
        "choices": ["", "", "", "", "", ""]
      }
    ]
  }
];

var comorbid = document.getElementsByClassName("conditions")[0];

// Loop over JSON array
json.forEach(function(item) {
  if (item.header !== '') { // Check if header is filled in.
  
    // Create and append headerbutton.
    let headerButton = document.createElement('button');
    headerButton.innerText = item.header;
    headerButton.style.background = '#aeafb6';
    comorbid.appendChild(headerButton);
    
    // Loop over subheaders and choices
    item.contents.forEach(function(content) {
      if (content.subheader !== '') { // Check if subheader is filled in.
      
        // Create and append subbutton.
        let subButton = document.createElement('button');
        subButton.innerText = content.subheader;
        comorbid.appendChild(subButton);
        
        // Loop over all the choices.
        content.choices.forEach(function(choice, choiceIndex) { // Second parameter of forEach is the current index in the array. Like i in a for loop.

            console.log(`Choice ${content.subheader}-${choiceIndex + 1}: ${choice}`); // Log current choice and its value.
            
            if (choice !== '') { // Check if choice is filled in.
                // Do something with the choice.
            }
        });
        
      }
    });
    
  }
});

<div class="conditions"></div>

编辑要访问choices数组，请在item.contents.forEach函数内创建另一个循环并检查每个choice 如果值已填写。我使用了 forEach 方法回调的第二个参数来输出当前索引。查看更多信息how to use this method on MDN.