آموزش ساخت رایگان اپلیکیشن نمایش جدول لیگ با Victory API و JavaScript

نمایش جدول رده‌بندی، یکی از پرطرفدارترین بخش‌های هر اپلیکیشن ورزشی است. در این آموزش، ما از اندپوینت جدید Standings در Victory API استفاده می‌کنیم تا یک جدول زیبا و واکنش‌گرا (Responsive) بسازیم.

گام اول: ساختار HTML

ابتدا یک فایل ساده برای نمایش جدول ایجاد می‌کنیم:

HTML Code:

<div id="league-container">
   <h2>جدول رده‌بندی لیگ</h2>
   <table id="standings-table">
       <thead>
           <tr>
               <th>رتبه</th>
               <th>تیم</th>
               <th>بازی</th>
               <th>امتیاز</th>
           </tr>
       </thead>
       <tbody id="table-body">
           </tbody>
   </table>
</div>

گام دوم: فراخوانی داده‌ها از API

با استفاده از متد fetch در جاوااسکریپت، داده‌ها را دریافت می‌کنیم. فراموش نکنید که x-vapi-key خود را در هدر قرار دهید:

JavaScript Code:

const apiKey = 'YOUR_API_KEY';
const url = 'https://api.v1.victoryapi.ir/Standings?season=2023&leagueId=290';

async function getStandings() {
   const response = await fetch(url, {
       headers: { 'x-api-key': apiKey }
   });
   const data = await response.json();
   renderTable(data.response[0].league.standings[0]);
}

گام سوم: رندر کردن داده‌ها

در نهایت، اطلاعات دریافتی را به سطر‌های جدول تبدیل می‌کنیم:

JavaScript Code:

function renderTable(standings) {
   const tbody = document.getElementById('table-body');
   standings.forEach(item => {
       const row = `<tr>
           <td>${item.rank}</td>
           <td><img src="${item.team.logo}" width="25"> ${item.team.name}</td>
           <td>${item.all.played}</td>
           <td>${item.points}</td>
       </tr>`;
       tbody.innerHTML += row;
   });
}
getStandings();

با همین چند خط کد، شما یک اپلیکیشن متصل به داده‌های واقعی Victory API دارید!