JSON到数据表映射

Question

我的JSON数据格式如下

{
  "RegX": {
    "LayerA": {
      "name": "abcd123",
      "url": "htt:cd1234"
    },
    "LayerB": {
      "name": "xyz234",
      "url": "ht:bcd12"
    }
  },
  "RegY": {
    "Layer1": {
      "name": "xyz123",
      "url": "ht/abc1234"
    },
    "Layer2": {
      "name": "xy234",
      "url": "http://abc12"
    }
  }
}

我想以下面的格式在数据表中显示它。

TABLE NAME - REGX

     NAME                URL
LAYERA  abcd123        httd1234
LAYERB  xyz234         http:cd12

TABLE NAME - REGY

    NAME                URL
LAYER1  xyz123        http:d1234
LAYER2  xyz234         h/abcd12

有没有办法可以在两个不同的表中显示单个JSON文件，并从JSON表中显示正确的行名和列名？我打算使用数据表，但无法找到正确的实现来使用

Answer 1

var myData = {
  "RegX": {
    "LayerA": {
      "name": "abcd123",
      "url": "htt:cd1234"
    },
    "LayerB": {
      "name": "xyz234",
      "url": "ht:bcd12"
    }
  },
  "RegY": {
    "Layer1": {
      "name": "xyz123",
      "url": "ht/abc1234"
    },
    "Layer2": {
      "name": "xy234",
      "url": "http://abc12"
    }
  }
};

var tables = Object.keys(myData);

for(var i=0; i<tables.length; i++){
  var rows = Object.keys(myData[tables[i]]);
  var tbl = document.createElement('table');
  document.getElementsByTagName('body')[0].appendChild(tbl);
  var thead = tbl.appendChild(document.createElement('thead'));
  thead.innerHTML = ("<tr><td>name</td><td>url</td></tr>");
  var tbdy = document.createElement('tbody');
  tbl.appendChild(tbdy);
  for(var j=0; j<rows.length; j++){
    var cols = Object.keys(myData[tables[i]][rows[j]]);
    var innerHTML = '';
    var tr = tbdy.insertRow(j);
    for(var k=0; k<cols.length; k++){
      innerHTML += "<td>"+myData[tables[i]][rows[j]][cols[k]]+"</td>";
    }
    tr.innerHTML = innerHTML;
  }
  
}

table, tr , td {
  border-collapse: collapse;
  border: 1px solid grey;
}

table {
  margin: 5px;
}

尝试了解代码并添加更多内容以满足您的需求。 希望你得到它，如果没有问我。