我有这个 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 会使我的网站容易受到攻击。但由于这是个人项目，所以我现在不关心这个。
最佳答案
你需要改变一些部分:
Title键在给定对象other中不存在，在keys中取title> 数组。检查键
url并将给定的 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);关于javascript - 将数据从 JSON 动态放入 HTML，同时排除键，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47967825/