How do I remove 1 property without changing object, so I can add content to tablecells?

Question

Contents:

• Problem
• Error I get
• Code
• Data
• What I want

Problem:
Trying to fill out tablecells that have ID's however I have 1 too many properties in my object, how do I remove this without altering the object? I want the rest of the code to use this object in it's whole.

Error I get:
"TypeError: Cannot set property 'innerHTML' of null"

Code:
(Trying to shorten it, so it will be easier to help, however I might miss some necessary code please notify me!)

 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>

Data:
So this is the JSON data, maybe seeing the data structure will help.

{
  "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"
      ]
    }
  ]
}

What I want to get:
The code works, however I want to get rid of the error and make the rest of the code work. Here's the bit where the Squad works; [![Squad table working][1]][1]
Here's the part where the Member bit works: [![Member table working][2]][2]
Want these two to work at the same time.

Feel free to ask for additional information. [1]: https://i.stack.imgur.com/G86nY.png [2]: https://i.stack.imgur.com/TTuje.png

Answer 1

You are mostly doing it right here, there is only one change you'll need to make, to ensure that element has a value:

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

Simply limit the key-processing to the first 5 keys by using .slice(0,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>

If the order of keys cannot be guaranteed then the following will be safer:

 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>