Javascript 将JSON中的数据动态转换为HTML，同时排除键

我有这个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];
    }
}

var table=document.createElement（“表”）；
变量键=[“标题”、“副标题”、“详细信息”、“url”]；
for（var j=0；j

我已经知道，在HTML中插入这样的数据会使我的网站容易受到攻击。但由于这是一个个人项目，我现在不关心这个问题。

试试这段代码

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];
        }
    }
}

---

您需要更改某些部分：

Title

键在给定对象

other

中不存在，请在

keys

数组中取

Title

对键

url

进行检查，将给定的url视为图像并返回该图像

将

表格

附加到正文或页面的任何其他元素

一个较小的提示：提前在顶部声明所有变量

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","ht",tps://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“]，命令：“显示2018年1月1日在纽约上市的10项结果”，副标题：[“可用：$79/夜”，“可用：$130.50/夜”，“可用：$399/夜”，“可用：$289/夜”，“可用：$149.25/夜”，“可用：$189/夜”，“可用：$146.30/夜”，“可用：$132.05/夜”，“可用：$1195/夜]”，详细信息：[“美国新泽西州泽西市纽瓦克大道789号”\n3.40英里\n3.1/5”（32条评论）\n'，美国纽约州纽约市第79分区街\n0.64米\n2.7（共5条评论）\n'，美国纽约州纽约市第302 E 45街\n3.18米\n2.9（共5条评论）\n'，美国纽约州纽约市第215 E 64街\n4.11米\n4.3（共5条评论）\n'，美国纽约州纽约市第1大道147号\n.46米\n3.9（共5条评论）\美国新泽西州泽西市华盛顿大道540号（590篇评论）\n'，美国纽约州纽约市西37街33号（1704篇评论）\n'，美国纽约州纽约市西百老汇95号（在钱伯斯），美国纽约州纽约市\n 0.19米\n 5篇评论中3.8篇（1330篇评论）\n'，美国新泽西州克兰福德市杰克逊博士2号（5.62米\n 4.2篇评论中5篇（219篇评论）\美国纽约州纽约市第55街第五大道700号，5次（732次评论）中有3.65英里\n4.7次，标题：[‘海班酒店’、‘含羞草酒店’、‘联合国公寓酒店’、‘纽约花园阿菲尼亚酒店’、‘东村酒店’、‘新泽西市万怡酒店’、‘纽约市万豪度假俱乐部脉搏’、‘弗雷德里克酒店’、‘纽瓦克克兰福德希尔顿霍姆伍德套房’、‘纽约半岛’]，
table=document.createElement（“表”），
tr,td,，
关键字=[“标题”、“副标题”、“详细信息”、“url”]，
j、 k；
对于（j=0；j