[英]How do I remove 1 property without changing object, so I can add content to tablecells?
Contents:内容:
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?尝试填写具有 ID 的表格单元格,但是我的对象中有 1 个属性太多,如何在不更改对象的情况下删除它? 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" “类型错误:无法将属性 'innerHTML' 设置为 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.所以这是 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"
]
}
]
}
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] [![小队表工作][1]][1]
Here's the part where the Member bit works: [![Member table working][2]][2]这是 Member 位工作的部分: [![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 [1]: https : //i.stack.imgur.com/G86nY.png [2]: https : //i.stack.imgur.com/TTuje.png
You are mostly doing it right here, there is only one change you'll need to make, to ensure that element
has a value:你主要是在这里做,你只需要做一个改变,以确保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];
}
});
}
Simply limit the key-processing to the first 5 keys by using .slice(0,5)
:只需使用.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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.