이번 포스트에서는 자바스크립트에서 JSON 데이터를 활용하여 게임 순위표를 동적으로 생성하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 준비하기

먼저, 게임 순위표에 표시할 데이터를 JSON 형식으로 준비해야 합니다. 예를 들어, 아래와 같은 모양의 JSON 데이터를 사용하겠습니다.

[
  { "rank": 1, "name": "John", "score": 100 },
  { "rank": 2, "name": "Mary", "score": 90 },
  { "rank": 3, "name": "Alex", "score": 80 }
]

위의 예제에서는 각 플레이어의 등수(rank), 이름(name), 점수(score) 정보를 포함하고 있습니다. 이러한 형식으로 데이터를 구성하여 순위표를 생성할 수 있습니다.

2. HTML 구조 작성하기

다음으로, 순위표를 표시할 HTML 구조를 작성해야 합니다. 예를 들어, 아래와 같이 테이블 형태로 구성된 순위표를 생성하겠습니다.

<table>
  <thead>
    <tr>
      <th>순위</th>
      <th>이름</th>
      <th>점수</th>
    </tr>
  </thead>
  <tbody id="rankingsTable">
    <!-- 여기에 자바스크립트로 생성할 내용이 들어갈 자리 -->
  </tbody>
</table>

위의 예제에서는 <tbody> 요소에 자바스크립트를 통해 동적으로 생성될 내용을 추가할 예정입니다.

3. 자바스크립트 코드 작성하기

이제, 작성한 HTML 구조에 동적으로 데이터를 추가하는 자바스크립트 코드를 작성해보겠습니다.

const rankings = [
  { "rank": 1, "name": "John", "score": 100 },
  { "rank": 2, "name": "Mary", "score": 90 },
  { "rank": 3, "name": "Alex", "score": 80 }
];

const rankingsTable = document.getElementById('rankingsTable');

rankings.forEach(player => {
  const row = document.createElement('tr');
  const rankCell = document.createElement('td');
  const nameCell = document.createElement('td');
  const scoreCell = document.createElement('td');

  rankCell.innerText = player.rank;
  nameCell.innerText = player.name;
  scoreCell.innerText = player.score;

  row.appendChild(rankCell);
  row.appendChild(nameCell);
  row.appendChild(scoreCell);

  rankingsTable.appendChild(row);
});

위의 예제 코드는 rankings 변수에 저장된 데이터를 순회하면서 테이블 내용을 동적으로 생성하는 코드입니다. 각각의 데이터 항목마다 새로운 <tr> 요소와 각각의 데이터를 표현하는 <td> 요소를 생성하고, 이를 테이블에 추가합니다.

4. 실행 및 결과 확인

코드를 작성한 후에는, 해당 HTML 파일을 브라우저에서 실행하여 순위표가 정상적으로 생성되는지 확인할 수 있습니다. 자바스크립트 코드를 실행하면 JSON 데이터를 기반으로 테이블이 동적으로 생성되어 출력됩니다.

이와 같은 방법을 사용하여 자바스크립트에서 JSON 데이터로 게임 순위표를 생성할 수 있습니다.

#게임순위 #자바스크립트