Javascript 在html div中显示JSON文件中的数据

@导入url（'https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap'）；
身体{
背景色：rgba（0,0,0,0.801）；
字体系列：Orbitron；
}
.集装箱{
显示器：flex；
证明内容：中心；
}
.头衔{
字体大小：50px；
颜色：rgba（255、255、255、0.801）；
文本对齐：居中；
利润率：50px0.70px0；
}
.类别p{
显示：内联；
颜色：rgba（255、255、255、0.801）；
字体大小：30px；
文本对齐：居中；
利润率：50像素230像素；
}
上校{
颜色：rgba（255、255、255、0.801）；
字体大小：24px；
弹性：50%；
填充：10px；
利润率：0.230px；
}
.分数{
显示器：flex；
}

Pygame排行榜
排行榜
时间

名字

要点

02.03 15:43

02.03 17:05

02.03 17:05

克雷布斯利

全轮驱动

哈哈

1080

233

133

尝试使用以下代码：

let data = {
    "scores": [{
            "time": "02.03 15:43",
            "name": "chraebsli",
            "points": 1080
        },
        {
            "time": "02.03 17:05",
            "name": "awd",
            "points": 233
        },
        {
            "time": "02.03 17:05",
            "name": "lol",
            "points": 133
        },
        {
            "time": "02.03 17:06",
            "name": "lol",
            "points": 307
        },
        {
            "time": "03.03 14:06",
            "name": "d",
            "points": 30
        }
    ]
};

let times = names = points = '<div class="col">';
for(let d in data.scores) {
    times += `<p>${data.scores[d].time}</p>`;
    names += `<p>${data.scores[d].name}</p>`;
    points += `<p>${data.scores[d].points}</p>`;
}
const result = [times, names, points].map(i => i + '</div>').join('');
$('.scores').append(result); // Via jQuery
document.getElementsByClassName('scores')[0].innerHTML += result; // Via vanilla Javascript

let数据={
“分数”：[{
“时间”：“02.03 15:43”，
“名称”：“chraebsli”，
“点数”：1080
},
{
“时间”：“02.03 17:05”，
“名称”：“awd”，
“点数”：233
},
{
“时间”：“02.03 17:05”，
“名称”：“lol”，
“点数”：133
},
{
“时间”：“02.03 17:06”，
“名称”：“lol”，
“点数”：307
},
{
“时间”：“03.03 14:06”，
“名称”：“d”，
“点数”：30
}
]
};
让时间=名称=点数=“”；
for（让d输入数据。分数）{
时间+=`${data.scores[d].time}
`；
name+=`${data.scores[d].name}
`；
分数+=`${data.scores[d]。分数}
`；
}
const result=[times，names，points].map（i=>i+''）.join（''）；
$（'.scores'）。追加（结果）；//通过jQuery
document.getElementsByClassName（'scores'）[0]。innerHTML+=result；//通过香草Javascript

---

它返回一个包含三个div的字符串。您只需要在页面上呈现它。

基于petyor的解决方案，我进一步阐述/展示了您将如何实际做到这一点：

let数据={
“分数”：[{
“时间”：“02.03 15:43”，
“名称”：“chraebsli”，
“点数”：1080
},
{
“时间”：“02.03 17:05”，
“名称”：“awd”，
“点数”：233
},
{
“时间”：“02.03 17:05”，
“名称”：“lol”，
“点数”：133
},
{
“时间”：“02.03 17:06”，
“名称”：“lol”，
“点数”：307
},
{
“时间”：“03.03 14:06”，
“名称”：“d”，
“点数”：30
}
]
};
让时间=名称=点数=“”；
for（让d输入数据。分数）{
时间+=`${data.scores[d].time}
`；
name+=`${data.scores[d].name}
`；
分数+=`${data.scores[d]。分数}
`；
}
[时间、名称、点].map（i=>i+''）.join（''）；
document.getElementById（“times”）.innerHTML=times；
document.getElementById（“名称”）.innerHTML=名称；
document.getElementById（“points”）.innerHTML=points
@导入url（'https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap'）；
身体{
背景色：rgba（0,0,0,0.801）；
字体系列：Orbitron；
}
.集装箱{
显示器：flex；
证明内容：中心；
}
.头衔{
字体大小：50px；
颜色：rgba（255、255、255、0.801）；
文本对齐：居中；
利润率：50px0.70px0；
}
.类别p{
显示：内联；
颜色：rgba（255、255、255、0.801）；
字体大小：30px；
文本对齐：居中；
利润率：50像素230像素；
}
.col{float:left；}
上校{
颜色：rgba（255、255、255、0.801）；
字体大小：24px；
弹性：50%；
填充：10px；
利润率：0.230px；
}
.分数{
显示器：flex；
}

Pygame排行榜
排行榜
时间

名字

要点

您想将其作为HTML格式的表格吗？@NikhilSingh不，我想将其作为单个p元素，我将上传一个示例，我多么希望它，请稍等片刻。抱歉，我正忙于其他工作。我刚看到留言。很高兴你得到了答案：）@NikhilSingh没问题每个人都有更好的事情要做但我必须把代码放在哪里？我把它放在div和上面下面，但它不起作用。你能告诉我为什么吗？考虑到你想把它放在
scores
div中的描述，你可以这样做：
$（'.scores'）。追加（result）
其中
result
是从最后一行返回的值。我将编辑我的答案，以便您可以更清楚地看到它。我提供了两种将文本附加到div的方法，请检查它们。谢谢，但我不知道为什么它不起作用，但我认为我将它放在了错误的位置。它必须在head元素中，不是吗？只需将代码放在
正文底部
结束标记之前的
标记中。将所有代码放在同一页中