Display data from JSON file in html div

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>

I have a JSON file named scores.json (an example below). I want to display the time, name and points in a HTML file in a div. How can I do that?

And I never use JS so please give me a full code and don't mark it as a duplicate, I already studied many other questions but I don't understand how to change it for my problem.

I now also inserted an example how it should look like (I know it isn't responsive and doesn't look well but that's how it should look like )

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

Try with this code:

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

It returns a string with the three divs. You just need to render it on the page.

Answer 2

Based on petyor's solution I have further elaborated/showed how you will actually do this:

 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>

Display data from JSON file in html div

Question

2 answers

solution1
1 2021-03-04 14:13:06

solution2
1 ACCPTED 2021-03-04 14:42:55

Display data from JSON file in html div

Question

2 answers

solution1 1 2021-03-04 14:13:06

solution2 1 ACCPTED 2021-03-04 14:42:55

solution1
1 2021-03-04 14:13:06

solution2
1 ACCPTED 2021-03-04 14:42:55