javascript - 将数据从 JSON 动态放入 HTML，同时排除键

Question

我有这个 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 会使我的网站容易受到攻击。但由于这是个人项目，所以我现在不关心这个。

Answer 1

你需要改变一些部分:

1. Title 键在给定对象other 中不存在，在keys 中取title > 数组。

2. 检查键 url 并将给定的 URL 视为图像并返回该图像。

3. 将 table 附加到正文或页面的任何其他元素。

4. 小提示:提前在顶部声明所有变量。

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);