我有这个JSON文件：
var other = {
url: [
'https://images.trvl-media.com/hotels/10000000/9030000/9025800/9025777/9025777_12_b.jpg',
'https://images.trvl-media.com/hotels/3000000/2920000/2915800/2915778/19315173_b.jpg',
'https://images.trvl-media.com/hotels/7000000/6640000/6635500/6635442/8dfdc1b0_b.jpg',
'https://images.trvl-media.com/hotels/1000000/30000/22100/22015/22015_95_b.jpg',
'https://images.trvl-media.com/hotels/8000000/7480000/7478000/7477970/6714984e_b.jpg',
'https://images.trvl-media.com/hotels/1000000/520000/518500/518432/3b490b41_b.jpg',
'https://images.trvl-media.com/hotels/3000000/2600000/2598800/2598721/03842515_b.jpg',
'https://images.trvl-media.com/hotels/1000000/50000/41900/41823/ea28ac3f_b.jpg',
'https://images.trvl-media.com/hotels/1000000/600000/596800/596791/596791_109_b.jpg',
'https://images.trvl-media.com/hotels/1000000/30000/23900/23855/6fde2673_b.jpg'
],
command: 'Showing 10 results with availability in New York for January 1, 2018.',
subtitle: [
'Available: $79 /night',
'Available: $130.50 /night',
'Available: $399 /night',
'Available: $289 /night',
'Available: $149.25 /night',
'Available: $189 /night',
'Available: $179 /night',
'Available: $146.30 /night',
'Available: $132.05 /night',
'Available: $1,195 /night'
],
details: [
'789 Newark Ave , Jersey City, NJ USA\n3.40 mi\n3.1 out of 5 (32 Reviews)\n',
'79 Divsion St , New York, NY USA\n0.64 mi\n2.7 out of 5 (55 Reviews)\n',
'302 E 45th St , New York, NY USA\n3.18 mi\n2.9 out of 5 (75 Reviews)\n',
'215 E 64th St , New York, NY USA\n4.11 mi\n4.3 out of 5 (683 Reviews)\n',
'147 1st Ave , New York, NY USA\n1.46 mi\n3.9 out of 5 (75 Reviews)\n',
'540 Washington Boulevard , Jersey City, NJ USA\n1.74 mi\n4.4 out of 5 (590 Reviews)\n',
'33 West 37 Street , New York, NY USA\n2.77 mi\n4.5 out of 5 (1704 Reviews)\n',
'95 West Broadway (at Chambers) , New York, NY USA\n0.19 mi\n3.8 out of 5 (1330 Reviews)\n',
'2 Jackson Dr , Cranford, NJ USA\n15.62 mi\n4.2 out of 5 (219 Reviews)\n',
'700 Fifth Avenue at 55th street , New York, NY USA\n3.65 mi\n4.7 out of 5 (732 Reviews)\n'
],
title: [
'Haiban Inn',
'Hotel Mimosa',
'United Nations Apartment Hotel',
'Gardens NYC-an Affinia hotel',
'East Village Hotel',
'Courtyard Jersey City Newport',
'Marriott Vacation Club Pulse, New York City',
'The Frederick Hotel',
'Homewood Suites by Hilton Newark-Cranford',
'The Peninsula New York'
]
};
我想使用JavaScript将这些数据放入HTML表中，但与此同时，我想从我的JSON中排除命令键。另外我想让url键直接插入img标签的src属性中。由于我是JavaScript的新手所以我试过这个：
var table = document.createElement("table");
var keys = ["Title", "subtitle", "details","url"];
for (var j = 0; j < other[keys[0]].length; j++) {
var tr = table.insertRow();
for (var k = 0; k < keys.length; k++) {
var td = tr.insertCell();
td.innerHTML = other[keys[k]][j];
}
}
我已经知道将这样的数据插入HTML会使我的网站容易受到攻击。但是，由于这是个人项目，我现在不关心这个。
答案 0 :(得分：1)
您需要更改部分内容：
Title密钥在给定对象other中不存在，而是在title数组中取代keys。
使用密钥url检查并将给定的网址视为图片并返回该图片。
将table附加到正文或页面的任何其他元素。
较小的提示：提前将所有变量声明为顶部。
var other = { url: ['https://images.trvl-media.com/hotels/10000000/9030000/9025800/9025777/9025777_12_b.jpg', 'https://images.trvl-media.com/hotels/3000000/2920000/2915800/2915778/19315173_b.jpg', 'https://images.trvl-media.com/hotels/7000000/6640000/6635500/6635442/8dfdc1b0_b.jpg', 'https://images.trvl-media.com/hotels/1000000/30000/22100/22015/22015_95_b.jpg', 'https://images.trvl-media.com/hotels/8000000/7480000/7478000/7477970/6714984e_b.jpg', 'https://images.trvl-media.com/hotels/1000000/520000/518500/518432/3b490b41_b.jpg', 'https://images.trvl-media.com/hotels/3000000/2600000/2598800/2598721/03842515_b.jpg', 'https://images.trvl-media.com/hotels/1000000/50000/41900/41823/ea28ac3f_b.jpg', 'https://images.trvl-media.com/hotels/1000000/600000/596800/596791/596791_109_b.jpg', 'https://images.trvl-media.com/hotels/1000000/30000/23900/23855/6fde2673_b.jpg'], command: 'Showing 10 results with availability in New York for January 1, 2018.', subtitle: ['Available: $79 /night', 'Available: $130.50 /night', 'Available: $399 /night', 'Available: $289 /night', 'Available: $149.25 /night', 'Available: $189 /night', 'Available: $179 /night', 'Available: $146.30 /night', 'Available: $132.05 /night', 'Available: $1,195 /night'], details: ['789 Newark Ave , Jersey City, NJ USA\n3.40 mi\n3.1 out of 5 (32 Reviews)\n', '79 Divsion St , New York, NY USA\n0.64 mi\n2.7 out of 5 (55 Reviews)\n', '302 E 45th St , New York, NY USA\n3.18 mi\n2.9 out of 5 (75 Reviews)\n', '215 E 64th St , New York, NY USA\n4.11 mi\n4.3 out of 5 (683 Reviews)\n', '147 1st Ave , New York, NY USA\n1.46 mi\n3.9 out of 5 (75 Reviews)\n', '540 Washington Boulevard , Jersey City, NJ USA\n1.74 mi\n4.4 out of 5 (590 Reviews)\n', '33 West 37 Street , New York, NY USA\n2.77 mi\n4.5 out of 5 (1704 Reviews)\n', '95 West Broadway (at Chambers) , New York, NY USA\n0.19 mi\n3.8 out of 5 (1330 Reviews)\n', '2 Jackson Dr , Cranford, NJ USA\n15.62 mi\n4.2 out of 5 (219 Reviews)\n', '700 Fifth Avenue at 55th street , New York, NY USA\n3.65 mi\n4.7 out of 5 (732 Reviews)\n'], title: ['Haiban Inn', 'Hotel Mimosa', 'United Nations Apartment Hotel', 'Gardens NYC-an Affinia hotel', 'East Village Hotel', 'Courtyard Jersey City Newport', 'Marriott Vacation Club Pulse, New York City', 'The Frederick Hotel', 'Homewood Suites by Hilton Newark-Cranford', 'The Peninsula New York'] },
table = document.createElement("table"),
tr, td,
keys = ["title", "subtitle", "details", "url"],
j, k;
for (j = 0; j < other[keys[0]].length; j++) {
tr = table.insertRow();
for (k = 0; k < keys.length; k++) {
var td = tr.insertCell();
td.innerHTML = keys[k] === 'url'
? '<img src="' + other[keys[k]][j] + '">'
: other[keys[k]][j];
}
}
document.body.appendChild(table);
答案 1 :(得分：0)
试试这段代码，
var table = document.createElement("table");
var keys = ["Title", "subtitle", "details", "url"];
for (j in others) {
if (j !== 'command') {
var tr = table.insertRow();
for (k in others[j]) {
var td = tr.insertCell();
td.innerHTML = others[j][k];
}
}
}