How to display coach profiles and career history
Neste tutorial veremos como buscar e exibir o perfil completo de um treinador, incluindo dados pessoais e histórico de carreira.
In this tutorial we'll see how to fetch and display a coach's full profile, including personal data and career history.
Use o endpoint /coachs com o parâmetro team para buscar o treinador atual de um time.
Aqui buscamos o treinador do Flamengo (ID 127).
Use the /coachs endpoint with the team parameter to get the current coach of a team.
Here we fetch the coach for Flamengo (ID 127).
const API_KEY = 'YOUR_API_KEY';
const BASE = 'https://football.api.insyde.one';
async function fetchApi(endpoint, params = {}) {
params.key = API_KEY;
const qs = new URLSearchParams(params).toString();
const res = await fetch(`${BASE}/${endpoint}?${qs}`);
return res.json();
}
// Get coach for Flamengo (team ID 127)
const data = await fetchApi('coachs', { team: 127 });
const coach = data.response[0];
console.log(coach.name, '—', coach.team.name);
A API retorna o perfil completo do treinador com dados pessoais e carreira / The API returns the full coach profile with personal data and career:
{
"response": [{
"id": 23648,
"name": "Filipe Luís",
"firstname": "Filipe Luís",
"lastname": "Kasmirski",
"age": 40,
"birth": {
"date": "1985-08-09",
"place": "Jaraguá do Sul",
"country": "Brazil"
},
"nationality": "Brazil",
"height": "181 cm",
"weight": "77 kg",
"photo": "https://football.api.insyde.one/football/coachs/23648.png",
"team": {
"id": 127,
"name": "Flamengo",
"logo": "https://football.api.insyde.one/football/teams/127.png"
},
"career": [
{
"team": { "id": 127, "name": "Flamengo" },
"start": "2024-09-01",
"end": null
},
{
"team": { "id": 11054, "name": "Flamengo U20" },
"start": "2024-06-01",
"end": "2024-09-01"
}
]
}]
}
O endpoint /coachs aceita diferentes formas de busca:
The /coachs endpoint accepts different search methods:
?team=ID — Busca pelo ID do time / Search by team ID (e.g. /coachs?team=127&key=API_KEY)?id=ID — Busca pelo ID do treinador / Search by coach ID (e.g. /coachs?id=23648&key=API_KEY)?search=name — Busca pelo nome / Search by name (e.g. /coachs?search=Filipe&key=API_KEY)// By team ID
const byTeam = await fetchApi('coachs', { team: 127 });
// By coach ID
const byId = await fetchApi('coachs', { id: 23648 });
// By name search
const byName = await fetchApi('coachs', { search: 'Filipe' });
Com os dados do treinador, podemos montar um card de perfil com foto, informações pessoais e histórico de carreira.
With the coach data, we can build a profile card with photo, personal info and career history.
function renderCoach(coach) {
const birth = coach.birth;
const birthDate = new Date(birth.date)
.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
let html = `
<div class="coach-card">
<img src="${coach.photo}" alt="${coach.name}">
<h2>${coach.name}</h2>
<p>${coach.team.name}</p>
<p>Born: ${birthDate} — ${birth.place}, ${birth.country}</p>
<p>${coach.height} | ${coach.weight}</p>
</div>`;
// Career timeline
html += '<div class="career">';
coach.career.forEach(entry => {
const start = new Date(entry.start)
.toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
const end = entry.end
? new Date(entry.end).toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
: 'Present';
const current = !entry.end ? ' (CURRENT)' : '';
html += `
<div class="career-entry">
<strong>${entry.team.name}</strong>${current}
<span>${start} — ${end}</span>
</div>`;
});
html += '</div>';
return html;
}