Build a Live League Table App using Victory API and JavaScript

Integrating live sports data into your web application has never been easier. Today, we’ll use the Victory API Standings endpoint to create a professional league table.

Step 1: HTML Skeleton

Create a simple container to hold your data:

HTML Code:

<div class="card">
   <h3>League Standings</h3>
   <table id="standings-list">
       </table>
</div>

Step 2: Fetching the Data

Use the JavaScript Fetch API to request the latest standings. Remember to include your x-vapi-key in the request headers for authentication.

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]);
}

Step 3: Dynamic Rendering

By looping through the response array from Victory API, you can dynamically create table rows that show team logos, ranks, played matches, and total points. This ensures your users always see the most up-to-date information.

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();

Pro Tip: You can use the form field from our API (e.g., "WWWDW") to show the last 5 match results with colorful icons!