I have this JSON file:
我有这个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: /night',
'Available: 0.50 /night',
'Available: 9 /night',
'Available: 9 /night',
'Available: 9.25 /night',
'Available: 9 /night',
'Available: 9 /night',
'Available: 6.30 /night',
'Available: 2.05 /night',
'Available:
I have this JSON file:
我有这个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'
]
};
I wanted to put this data into a HTML table using JavaScript, but at the same time, I wanted to exclude the command key from my JSON. Also I wanted the url key to get directly inserted in the src attribute of img tag. As I am new to JavaScript so I tried this:
我想使用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];
}
}
I already know that inserting data like this to HTML makes my site vulnerable. But as this is for a personal project I don't care about this as of now.
我已经知道向HTML插入这样的数据会使我的站点变得脆弱。但这是一个个人项目，我现在不关心这个。
2 个解决方案
#1
1
You need to change some parts:
你需要改变一些部分:
Title key does not exist in the given object other, take title instead in the keys array.
标题键不存在于给定的对象中，而在键数组中取标题。
Use a check for the key url and treat the the given URL as image and return that image.
检查密钥url并将给定的url视为映像并返回该映像。
Append table to the body or to any other element of the page.
将表附加到主体或页面的任何其他元素。
A smaller hint: Declare all variable at top in advance.
一个小提示:在顶部声明所有变量。
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);
#2
0
Try this code,
试试这个代码,
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];
}
}
}
,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'
]
};
var othe
