#javascript #html #json
Вопрос:
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600amp;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> У меня есть файл JSON с именем scores.json (пример ниже). Я хочу отобразить время, имя и точки в HTML-файле в div. Как я могу это сделать?
И я никогда не использую JS, поэтому, пожалуйста, дайте мне полный код и не помечайте его как дубликат, я уже изучил много других вопросов, но я не понимаю, как его изменить для моей проблемы.
Теперь я также вставил пример того, как это должно выглядеть (я знаю, что он не реагирует и выглядит не очень хорошо, но именно так это должно выглядеть )
HTML div:
<div class="container 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
}
]
}
Комментарии:
1. Хотели бы вы иметь его в виде таблицы в формате HTML?
2. @NikhilSingh нет, я хочу, чтобы это было как отдельные элементы p, я загружу пример того, как я этого хочу, минутку, пожалуйста
3. Извини, я был занят другой работой. Только что видел сообщение. Рад, что вы получили ответ 🙂
4. @NikhilSingh нет проблем, у всех есть дела поважнее
Ответ №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>`;
}
[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@600amp;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> Ответ №2:
Попробуйте использовать этот код:
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 = resu< // Via vanilla Javascript
Он возвращает строку с тремя разделителями. Вам просто нужно отобразить его на странице.
Комментарии:
1. спасибо, но где я должен разместить код? Я поместил его в div и выше, и ниже, но он не работает, Можете ли вы сказать мне, почему?
2. Учитывая описание, которое вы хотите получить внутри
scoresdiv, чтобы вы могли сделать что-то вроде этого:$('.scores').append(result)гдеresultзначение, возвращаемое из последней строки. Я отредактирую свой ответ, чтобы вы могли видеть его яснее.3. Я предоставил два способа добавления текста в div, проверьте их.
4. Спасибо, но я не знаю, почему это не работает, но я думаю, что поставил его в ложное положение. Это должно быть в элементе головы, не так ли?
5. Просто поместите код внутри
<script></script>тега в нижней частиbodyперед</body>закрывающим тегом.