从JSON文件中的数组格式化HTML

时间:2019-04-27 15:29:35

标签: javascript html arrays json

在询问_之前,我已经对SO进行了5-6个问题,其他问题似乎涉及格式化来自完整JSON文件的所有数据_这个问题是关于格式化从JSON文件解析的数组元素_ < / p>

完整的测试页面在线here,但是为了简洁起见,我缩短了JSON数据_

{
    "PGRgames" : [
        {
            "id" : "Abzu",
            "fullName" : "Abzû",
            "PEGI" : 7,
            "platforms" : ["PS4"],
            "genres" : ["Adventure", "Simulation"],
            "image" : "img_Abzu.png",
            "details" : "ABZÛ is a beautiful underwater adventure that evokes the dream of diving. Immerse yourself in a vibrant ocean world full of mystery and bursting with colour and life."
        },
        {
            "id" : "AdventurePirates",
            "fullName" : "Adventure Time: Pirates Of The Enchridion",
            "PEGI" : 7,
            "platforms" : ["XBoxOne", "PS4", "Switch"],
            "genres" : ["Adventure", "Sandbox", "KIDS"],
            "image" : "img_AdventurePirates.png",
            "details" : "The Land of Ooo is underwater and it’s up to Finn and Jake to find out why.  Join our heroes as they explore the high seas."
        },
        {
            "id" : "KingdomCome",
            "fullName" : "Kingdom Come: Deliverance",
            "PEGI" : 18,
            "platforms" : ["XBoxOne", "XBoxOneX", "PS4"],
            "genres" : ["Action", "RPG"],
            "image" : "img_KingdomCome.png",
            "details" : "Massive realistic open world: Majestic castles, vast fields, all rendered in stunning high-end graphics. Solve quests in multiple ways, then face the consequences of your decisions."
        }
    ]
}

我的JS代码是_

<script>
let askHTTP = new XMLHttpRequest();
            askHTTP.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    let gamesList = JSON.parse(askHTTP.responseText);
                    let output = '';
                    let PGRgames = gamesList.PGRgames;
                    for (let i = 0; i < PGRgames.length; i++) {
                        output += '<div class="col-md-3 col-sm-6 padBox"><div class="gameBox center"><img src="media/' 
                        + PGRgames[i].image 
                        + '" /><div class="horizBuffer"></div>' 
                        + '<div class="center"><span class="fontBrand1 smallText"><strong>' + PGRgames[i].genres + '</strong></span></div>'
                        + '<div class="horizBuffer"></div>'
                        + '<div class="left"><span class="fontBlack text">' + PGRgames[i].details + '</span></div>'
                        + '<div class="horizBuffer"></div>'
                        + '<div class="center"><span class="fontBlack text"><strong>' + PGRgames[i].platforms + '</strong></span></div>'
                        + '</div></div>';  
                    }
                    document.getElementById('displayGames').innerHTML = output;
                }
            };
            askHTTP.open("GET", "js/PGRgames.json", true);
            askHTTP.send();

</script>

如果您查看我链接到的页面上的内容,则会看到 PGRgames.genres PGRgames.platforms 带有逗号,但数组之间没有空格元素_而且数组不符合应被限制在_

的区域

格式化这两个数组特别是我的问题所指的_我将不胜感激:)

2 个答案:

答案 0 :(得分:1)

您可以使用.join()将数组格式化为字符串。

x = torch.arange(24).view(4, 3, 2) 
"""
tensor([[[ 0,  1],
         [ 2,  3],
         [ 4,  5]],

        [[ 6,  7],
         [ 8,  9],
         [10, 11]],

        [[12, 13],
         [14, 15],
         [16, 17]],

        [[18, 19],
         [20, 21],
         [22, 23]]])
"""
ids = torch.randint(0, 3, size=(4, 1))
"""
tensor([[0],
        [2],
        [0],
        [2]])
"""
idx = ids.repeat(1, 2).view(4, 1, 2) 
"""
tensor([[[0, 0]],

        [[2, 2]],

        [[0, 0]],

        [[2, 2]]])
"""

torch.gather(x, 1, idx) 
"""
tensor([[[ 0,  1]],

        [[10, 11]],

        [[12, 13]],

        [[22, 23]]])
"""

在您的情况下,以类似的方式用var array = ["foo", "bar", "tet"]; console.log('formatted:', array.join(', ')); console.log('tostring:', ''+array);和其他数组输出替换PGRgames[i].genres

答案 1 :(得分:0)

您的问题是您编写此行:

PGRgames[1].platforms

就像写这样:

PGRgames[1].platforms.toString()

它的作用只是使用数组中每个元素的tostring并将它们与逗号连接。

您需要做的是使用连接到tha数组,并根据需要格式化它:

PGRgames[1].platforms.join(', ')