Como exibir predicoes de jogos

How to display match predictions and win probabilities

Neste tutorial veremos como buscar e exibir predicoes de resultado para uma partida, incluindo probabilidades de vitoria e estatisticas de forma recente.

In this tutorial we'll see how to fetch and display match result predictions, including win probabilities and recent form statistics.

1. Buscar predicao / Get prediction

O endpoint /predictions recebe o ID do fixture e retorna a predicao do resultado, incluindo probabilidades e estatisticas dos dois times.

The /predictions endpoint takes the fixture ID and returns the result prediction, including probabilities and stats for both teams.

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 prediction for Fluminense vs Flamengo
const data = await fetchApi('predictions', { fixture: 1500872 });
const prediction = data.response[0];
console.log(prediction.predictions);

2. Resposta da API / API response

A resposta completa para o Fla-Flu (fixture 1500872) / The full response for Fla-Flu (fixture 1500872):

{
  "response": [{
    "predictions": {
      "winner": { "id": 124, "name": "Fluminense" },
      "win_or_draw": false,
      "under_over": null,
      "goals": { "home": "-3.5", "away": "-1.5" },
      "advice": "Winner : Fluminense",
      "percent": { "home": "45%", "draw": "45%", "away": "10%" }
    },
    "league": {
      "id": 624,
      "name": "Carioca - 1",
      "country": "Brazil",
      "season": 2026
    },
    "teams": {
      "home": {
        "id": 124, "name": "Fluminense",
        "last_5": {
          "played": 3, "form": "67%", "att": "31%", "def": "75%",
          "goals": {
            "for": { "total": 5, "average": "1.7" },
            "against": { "total": 4, "average": "1.3" }
          }
        },
        "league": { "form": "WLW" }
      },
      "away": {
        "id": 127, "name": "Flamengo",
        "last_5": {
          "played": 3, "form": "67%", "att": "31%", "def": "75%",
          "goals": {
            "for": { "total": 5, "average": "1.7" },
            "against": { "total": 4, "average": "1.3" }
          }
        },
        "league": { "form": "WLW" }
      }
    }
  }]
}

3. Campos da predicao / Prediction fields

O objeto predictions contem os seguintes campos:

• percent — Probabilidades de resultado: home, draw, away. Ex: "home": "45%"
• winner — O time favorito segundo o modelo. Contem id e name / The predicted winner with id and name
• advice — Texto com a recomendacao, ex: "Winner : Fluminense" / Recommendation text
• goals — Linhas de gols previstas (home e away) / Predicted goal lines for home and away
• win_or_draw — Se o favorito tambem pode empatar (true/false) / Whether the favorite may also draw
• under_over — Linha de over/under sugerida, ou null se nao disponivel / Suggested over/under line, or null if unavailable

4. Form e estatisticas / Form & stats

Cada time possui um objeto last_5 com estatisticas dos ultimos jogos:

Each team has a last_5 object with stats from recent matches:

• played — Numero de jogos considerados / Number of matches considered
• form — Porcentagem de aproveitamento geral, ex: "67%" / Overall form percentage
• att — Rating de ataque, ex: "31%" / Attack rating percentage
• def — Rating de defesa, ex: "75%" / Defense rating percentage
• goals.for.total e goals.for.average — Gols marcados (total e media) / Goals scored (total and average)
• goals.against.total e goals.against.average — Gols sofridos (total e media) / Goals conceded (total and average)

O campo league.form mostra a sequencia de resultados recentes com letras: W (vitoria), L (derrota), D (empate).

The league.form field shows recent results as letters: W (win), L (loss), D (draw).

5. Renderizar predicao / Render prediction

Com os dados em maos, podemos montar um card visual com barras de probabilidade e comparacao entre os times:

function renderPrediction(data) {
  const { predictions, teams } = data;
  const pct = predictions.percent;

  // Parse percentages
  const home = parseInt(pct.home);
  const draw = parseInt(pct.draw);
  const away = parseInt(pct.away);

  // Build probability bar
  let html = `
    <div class="prob-bar">
      <div style="width:${home}%" class="home">${home}%</div>
      <div style="width:${draw}%" class="draw">${draw}%</div>
      <div style="width:${away}%" class="away">${away}%</div>
    </div>
  `;

  // Advice badge
  html += `<div class="advice">${predictions.advice}</div>`;

  // Form circles for each team
  function formDots(formStr) {
    return formStr.split('').map(c =>
      `<span class="dot ${c}"></span>`
    ).join('');
  }

  // Team comparison
  html += `
    <div class="comparison">
      <div class="team">
        <strong>${teams.home.name}</strong>
        <div>Form: ${formDots(teams.home.league.form)}</div>
        <div>Attack: ${teams.home.last_5.att}</div>
        <div>Defense: ${teams.home.last_5.def}</div>
        <div>Goals avg: ${teams.home.last_5.goals.for.average}</div>
      </div>
      <div class="team">
        <strong>${teams.away.name}</strong>
        <div>Form: ${formDots(teams.away.league.form)}</div>
        <div>Attack: ${teams.away.last_5.att}</div>
        <div>Defense: ${teams.away.last_5.def}</div>
        <div>Goals avg: ${teams.away.last_5.goals.for.average}</div>
      </div>
    </div>
  `;

  document.getElementById('content').innerHTML = html;
}

Back to Football API docs