如何在不更改對象的情況下刪除 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>