Question

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

body {
    background-color: rgba(0, 0, 0, 0.801);
    font-family: Orbitron;
}

.container {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 50px;
    color: rgba(255, 255, 255, 0.801);
    text-align: center;
    margin: 50px 0 70px 0;
}

.categorys p {
    display: inline;
    color: rgba(255, 255, 255, 0.801);
    font-size: 30px;
    text-align: center;
    margin: 50px 230px;
}

.col p {
    color: rgba(255, 255, 255, 0.801);
    font-size: 24px;
    flex: 50%;
    padding: 10px;
    margin: 0 230px;
}

.scores {
    display: flex;
}

<!DOCTYPE html>
<html lang='de'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel="stylesheet" href="style.css">
    <title>Pygame Leaderboard</title>
</head>

<body>
    <h1 class="title">Leaderboard</h1>
    <div class="container categorys">
        <p>Time</p>
        <p>Name</p>
        <p>Points</p>
    </div>
    <div class="scores">

        <div class="col">
            <p>02.03 15:43</p>
            <p>02.03 17:05</p>
            <p>02.03 17:05</p>
        </div>
        <div class="col">
            <p>chraebsli</p>
            <p>awd</p>
            <p>lol</p>
        </div>
        <div class="col">
            <p>1080</p>
            <p>233</p>
            <p>133</p>
        </div>
    </div>
</body>

</html>

我有一个名为 score.json 的 JSON 文件（以下示例）。我想在一个 div 的 HTML 文件中显示时间、名称和点。我该怎么做？

<块引用>

而且我从不使用 JS，所以请给我一个完整的代码，不要将其标记为重复，我已经研究了许多其他问题，但我不明白如何针对我的问题更改它。

我现在还插入了一个示例（我知道它没有响应并且看起来不太好，但它应该是这样的）

HTML div：

<div class="container scores">

scores.json：

{
    "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
        }
    ]
}

Answer 1

试试这个代码：

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

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

Answer 2

基于 petyor 的解决方案，我进一步阐述/展示了您将如何实际执行此操作：

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>`;
}
[times, names, points].map(i => i + '</div>').join('');
document.getElementById("times").innerHTML = times;
document.getElementById("names").innerHTML = names;
document.getElementById("points").innerHTML = points;

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

body {
    background-color: rgba(0, 0, 0, 0.801);
    font-family: Orbitron;
}

.container {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 50px;
    color: rgba(255, 255, 255, 0.801);
    text-align: center;
    margin: 50px 0 70px 0;
}

.categorys p {
    display: inline;
    color: rgba(255, 255, 255, 0.801);
    font-size: 30px;
    text-align: center;
    margin: 50px 230px;
}
.col{float:left;}
.col p {
    color: rgba(255, 255, 255, 0.801);
    font-size: 24px;
    flex: 50%;
    padding: 10px;
    margin: 0 230px;
}

.scores {
    display: flex;
}

<!DOCTYPE html>
<html lang='de'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel="stylesheet" href="style.css">
    <title>Pygame Leaderboard</title>
</head>

<body>
    <h1 class="title">Leaderboard</h1>
    <div class="container categorys">
        <p>Time</p>
        <p>Name</p>
        <p>Points</p>
    </div>
    <div class="scores" id="scores">

        <div class="col" id="times">
       <!--     <p>02.03 15:43</p>
            <p>02.03 17:05</p>
            <p>02.03 17:05</p> -->
        </div>
        <div class="col" id="names">
        <!--    <p>chraebsli</p>
            <p>awd</p>
            <p>lol</p> -->
        </div>
        <div class="col" id="points">
           <!-- <p>1080</p>
            <p>233</p>
            <p>133</p> -->
        </div> 
    </div>
</body>

</html>

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

2 个答案: