JavaScript中检测JSON Subschema 避免嵌套错误循环及优化循环方案

问题根源 #

你当前的问题是硬编码了3层固定for循环，没有判断当前节点的值是不是可继续遍历的对象：当节点值是字符串（比如TWO LEVEL下的PRODUCTION对应的http://aaa.com）时，依然执行第三层循环遍历字符串的字符索引，就会输出0~13这类错误内容。

最优解决方案：递归遍历n层结构 #

不需要固定层数的循环，写一个递归函数自动判断当前节点是否存在子结构，存在就继续遍历，不存在就终止，天然适配任意层级的Subschema。

修正后代码 #

HTML

<table></table>

JavaScript

var data = {
  "THREE LEVEL": {
    "PRODUCTION": {
      "One": "http://one.com",
      "Two": "http://two.com"
    },
    "LATEST": {
      "alpha": "http://alpha.com",
      "omega": "http://omega.com"
    },
    "STAGE": {
      "Apha": "http://alpha.com",
      "Bravo": "http://bravo.com", 
      "Charley": "http://charley.com"
    }
  },
  "TWO LEVEL": {
    "PRODUCTION": "http://aaa.com",
    "LATEST": "http://bbb.com",
    "STAGE": "http://ccc.com"
  }
}

var table = document.querySelector('table');
var rows = '';

// 递归遍历函数
function generateRows(node) {
  for (const key in node) {
    const value = node[key];
    // 判断当前值是否存在子结构
    const hasSubschema = typeof value === 'object' && value !== null;
    if (hasSubschema) {
      // 有子结构，先渲染当前层级节点，再递归遍历子结构
      rows += `<tr><td>${key}</td><td></td></tr>`;
      generateRows(value);
    } else {
      // 没有子结构，渲染带链接的最终节点
      rows += `<tr><td><a href="${value}">${key}</a></td><td></td></tr>`;
    }
  }
}

generateRows(data);
table.innerHTML = rows;

修正后输出效果 #

THREE LEVEL 
PRODUCTION  
One 
Two 
LATEST  
alpha   
omega   
STAGE   
Apha    
Bravo   
Charley 
TWO LEVEL   
PRODUCTION  
LATEST  
STAGE   

内容的提问来源于stack exchange，提问作者Chris Pare