如何在不更改对象的情况下删除 1 个属性，以便向表格单元格添加内容？

Question

内容：

• 问题
• 我得到的错误
• 代码
• 数据
• 我想要的是

问题：
尝试填写具有 ID 的表格单元格，但是我的对象中有 1 个属性太多，如何在不更改对象的情况下删除它？ 我希望其余的代码完整地使用这个对象。

我得到的错误：
“类型错误：无法将属性 'innerHTML' 设置为 null”

代码：
（试图缩短它，这样会更容易帮助，但我可能会错过一些必要的代码，请通知我！）

 function processResponse(response) { var responseJS = JSON.parse(response); // Squad information: Object.keys(responseJS).forEach(key => { let tablecellID = document.getElementById(key); tablecellID.innerHTML = responseJS[key]; }); }

 td { border: 2px solid black; border-spacing: 0; }

 <table id='overview-table'> <tr> <th>squadName</th> <th>homeTown</th> <th>formed</th> <th>secretBase</th> <th>active</th> </tr> <tr> <td id='squadName'></td> <td id='homeTown'></td> <td id='formed'></td> <td id='secretBase'></td> <td id='active'></td> </tr> <table>

数据：
所以这是 JSON 数据，也许查看数据结构会有所帮助。

{
  "squadName" : "Super Hero Squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name" : "Eternal Flame",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

我想得到什么：
该代码有效，但是我想摆脱错误并使其余代码正常工作。 这是小队工作的地方； [![小队表工作][1]][1]
这是 Member 位工作的部分： [![Member table working][2]][2]
希望这两个同时工作。

随时询问更多信息。 [1]： https : //i.stack.imgur.com/G86nY.png [2]： https : //i.stack.imgur.com/TTuje.png

Answer 1

你主要是在这里做，你只需要做一个改变，以确保element有一个值：

function processResponse(response) {
  var responseJS = JSON.parse(response);
  // Squad information:
  Object.keys(responseJS).forEach(key => {
    let tablecellID = document.getElementById(key);
    if(tablecellID)  { // check if element exists
      tablecellID.innerHTML = responseJS[key];
    }
  });
}

Answer 2

只需使用.slice(0,5)将键处理限制为前 5 个键：

 const squadron=`{"squadName" : "Super Hero Squad","homeTown" : "Metro City","formed" : 2016,"secretBase" : "Super tower","active" : true,"members" : [ {"name" : "Molecule Man","age" : 29,"secretIdentity" : "Dan Jukes","powers" :["Radiation resistance","Turning tiny","Radiation blast"]}, {"name" : "Madame Uppercut","age" : 39,"secretIdentity" : "Jane Wilson","powers" : ["Million tonne punch","Damage resistance","Superhuman reflexes"]}, {"name" : "Eternal Flame","age" : 1000000,"secretIdentity" : "Unknown","powers" : ["Immortality","Heat Immunity","Inferno","Teleportation","Interdimensional travel"]}]}`; function processResponse(response) { var responseJS = JSON.parse(response); // Squad information: Object.keys(responseJS).slice(0,5).forEach(key => { let tablecellID = document.getElementById(key); tablecellID.innerHTML = responseJS[key]; }); } processResponse(squadron);

 td { border: 2px solid black; border-spacing: 0; }

 <table id='overview-table'> <tr> <th>squadName</th> <th>homeTown</th> <th>formed</th> <th>secretBase</th> <th>active</th> </tr> <tr> <td id='squadName'></td> <td id='homeTown'></td> <td id='formed'></td> <td id='secretBase'></td> <td id='active'></td> </tr> <table>

如果无法保证密钥的顺序，那么以下方法会更安全：

 const squadron=`{"squadName" : "Super Hero Squad","homeTown" : "Metro City","formed" : 2016,"secretBase" : "Super tower","active" : true,"members" : [ {"name" : "Molecule Man","age" : 29,"secretIdentity" : "Dan Jukes","powers" :["Radiation resistance","Turning tiny","Radiation blast"]}, {"name" : "Madame Uppercut","age" : 39,"secretIdentity" : "Jane Wilson","powers" : ["Million tonne punch","Damage resistance","Superhuman reflexes"]}, {"name" : "Eternal Flame","age" : 1000000,"secretIdentity" : "Unknown","powers" : ["Immortality","Heat Immunity","Inferno","Teleportation","Interdimensional travel"]}]}`; function processResponse(response) { var res = JSON.parse(response); // Squad information: Object.entries(res).forEach(([key,val]) => { let td = document.getElementById(key); if(td) td.innerHTML=val; }); } processResponse(squadron);

 td { border: 2px solid black; border-spacing: 0; }

 <table id='overview-table'> <tr> <th>squadName</th> <th>homeTown</th> <th>formed</th> <th>secretBase</th> <th>active</th> </tr> <tr> <td id='squadName'></td> <td id='homeTown'></td> <td id='formed'></td> <td id='secretBase'></td> <td id='active'></td> </tr> <table>