Como montar o historico de transferencias

How to build a player transfer timeline

Neste tutorial veremos como buscar o historico de transferencias de um jogador e renderizar uma timeline visual.

In this tutorial we'll see how to fetch a player's transfer history and render a visual timeline.

1. Buscar transferencias / Get transfers

O endpoint /transfers recebe o parametro player com o ID do jogador. Vamos usar Neymar (ID 276) como exemplo.

The /transfers endpoint takes a player parameter with the player ID. We'll use Neymar (ID 276) as an example.

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 Neymar's transfer history
const data = await fetchApi('transfers', { player: 276 });
console.log(data);

2. Resposta da API / API response

A API retorna o historico completo de transferencias do jogador / The API returns the player's full transfer history:

{
  "response": [{
    "player": { "id": 276, "name": "Neymar" },
    "update": "2026-02-09T00:43:31+00:00",
    "transfers": [
      {
        "date": "2025-01-31",
        "type": "Free Transfer",
        "teams": {
          "in": { "id": 128, "name": "Santos" },
          "out": { "id": 2932, "name": "Al-Hilal Saudi FC" }
        }
      },
      {
        "date": "2023-08-15",
        "type": "€ 80M",
        "teams": {
          "in": { "id": 2932, "name": "Al-Hilal Saudi FC" },
          "out": { "id": 85, "name": "Paris Saint Germain" }
        }
      },
      {
        "date": "2017-08-03",
        "type": "€ 222M",
        "teams": {
          "in": { "id": 85, "name": "Paris Saint Germain" },
          "out": { "id": 529, "name": "Barcelona" }
        }
      },
      {
        "date": "2013-07-01",
        "type": "€ 88.2M",
        "teams": {
          "in": { "id": 529, "name": "Barcelona" },
          "out": { "id": 128, "name": "Santos" }
        }
      }
    ]
  }]
}

Cada transferencia possui a data, o tipo (valor ou Free Transfer) e os times de entrada (in) e saida (out).

Each transfer has the date, type (fee or Free Transfer), and the teams involved — in (destination) and out (origin).

3. Renderizar timeline / Render timeline

Com os dados em maos, podemos construir uma timeline vertical mostrando cada transferencia.

With the data in hand, we can build a vertical timeline showing each transfer.

const IMG = 'https://football.api.insyde.one/football';

function renderTimeline(playerData) {
  const { player, transfers } = playerData;

  let html = `<h2>${player.name} — Transfer History</h2>`;
  html += '<div class="timeline">';

  transfers.forEach(t => {
    const year = t.date.slice(0, 4);
    const inTeam = t.teams.in;
    const outTeam = t.teams.out;

    html += `
      <div class="timeline-entry">
        <div class="timeline-date">${t.date}</div>
        <div class="timeline-content">
          <img src="${IMG}/teams/${outTeam.id}.png">
          <span>&rarr;</span>
          <img src="${IMG}/teams/${inTeam.id}.png">
          <span class="fee">${t.type}</span>
        </div>
      </div>`;
  });

  html += '</div>';
  document.getElementById('content').innerHTML = html;
}

const data = await fetchApi('transfers', { player: 276 });
renderTimeline(data.response[0]);

4. Buscar por time / Search by team

Alem de buscar por jogador, voce pode buscar todas as transferencias de um time usando o parametro team:

Besides searching by player, you can fetch all transfers for a team using the team parameter:

// Get all transfers for Santos (team ID 128)
const teamTransfers = await fetchApi('transfers', { team: 128 });
console.log(`Total players with transfers: ${teamTransfers.results}`);

// Each entry in response[] is a player with their transfers
teamTransfers.response.forEach(entry => {
  console.log(`${entry.player.name}: ${entry.transfers.length} transfers`);
});

Back to Football API docs