Login Get API Key
Tutorials

How to Build a Post-Match Summary Page with Venue, Ref, and MOTM Data

Illustration of a post-match summary card showing venue, referee, and player of the match

Learn how to build a rich post-match summary โ€” stadium, referee, TV broadcast, and player of the match โ€” using Live Football API's match details fields.

On this page

A match's score and events tell half the story. The other half โ€” where it was played, who officiated, which channel broadcast it, and who was named player of the match โ€” is what turns a basic scoreline into a proper match center page. All of this lives in a single /live_match_details call.

The Fields That Make a Match Center Feel Complete

Beyond header, events, and stats, the response includes four fields purpose-built for a post-match summary:

  • venue โ€” stadium name and capacity
  • referee โ€” the match official's name
  • tv_channels โ€” an array of actual broadcaster names
  • player_of_the_match โ€” name, image, and rating of the standout performer

Fetching the Full Summary

import requests

response = requests.get(
    'https://live-football-api.com/api/v1/live_match_details',
    params={'api_key': 'YOUR_KEY', 'match_id': match_id, 'lang': 'en'}
).json()

data = response['data']

print(f"Venue: {data['venue']['name']} (capacity {data['venue']['capacity']:,})")
print(f"Referee: {data['referee']}")
print(f"Broadcast on: {', '.join(data['tv_channels'])}")

motm = data['player_of_the_match']
if motm:
    print(f"Player of the Match: {motm['name']} (rating {motm['rating']})")

Rendering a Match Summary Card

function MatchSummaryCard({ data }) {
  return (
    <div className="match-summary">
      <h3>{data.header.home.name} {data.header.home.score} - {data.header.away.score} {data.header.away.name}</h3>

      <dl>
        <dt>Venue</dt>
        <dd>{data.venue.name} ({data.venue.capacity.toLocaleString()} capacity)</dd>

        <dt>Referee</dt>
        <dd>{data.referee}</dd>

        <dt>Broadcast</dt>
        <dd>{data.tv_channels.join(', ')}</dd>
      </dl>

      {data.player_of_the_match && (
        <div className="motm">
          <img src={data.player_of_the_match.image} alt="" />
          <span>{data.player_of_the_match.name} โ€” {data.player_of_the_match.rating}</span>
        </div>
      )}
    </div>
  );
}

Handling Missing Data Gracefully

Not every field is guaranteed on every match โ€” player_of_the_match in particular may not be assigned for lower-tier or in-progress matches. Always check before rendering rather than assuming the object exists:

function MotmBadge({ motm }) {
  if (!motm) return null; // no MOTM assigned for this match
  return (
    <div className="motm-badge">
      <img src={motm.image} alt={motm.name} />
      <span>{motm.name}</span>
      <strong>{motm.rating}</strong>
    </div>
  );
}

Using tv_channels vs the Older tv_broadcast Flag

Note the difference between two similarly-named fields: /matches returns a simple boolean tv_broadcast (is this match on TV at all, no channel names), while /live_match_details returns the actual tv_channels array with real broadcaster names. Use the boolean for a quick "๐Ÿ“บ TV" badge in a match list, and the full array for a detail page:

// In a match list (from /matches):
{match.tv_broadcast && <span className="tv-badge">๐Ÿ“บ</span>}

// In a match detail page (from /live_match_details):
{data.tv_channels.length > 0 && (
  <p>Watch on: {data.tv_channels.join(', ')}</p>
)}

Combining with Officials for a Full Match Report

For a deeper officiating breakdown beyond the single referee string, combine this with the dedicated /officials endpoint, which returns the full officiating team (linesmen, fourth official, VAR):

const [details, officials] = await Promise.all([
  fetchLiveMatchDetails(matchId),
  fetchOfficials(matchId)
]);

renderMatchReport({ ...details, fullOfficiatingTeam: officials.officials });

Frequently Asked Questions

Is player_of_the_match available before a match ends?

It's typically assigned once there's enough match data to determine a standout performer, so it may be null during the early stages of a live match and populate as the game progresses or concludes.

Does venue data include the city or just the stadium name?

The venue object returns stadium name and capacity; if you need city-level detail, that's not included in this field and would need to be sourced separately.

Can tv_channels be empty even for major matches?

Yes, broadcast information availability can vary by competition and region, so always handle an empty array rather than assuming every match has broadcaster data.

What's the difference between referee here and the officials endpoint?

The referee field in /live_match_details is a quick single string for the main official; /officials returns the full team including linesmen, fourth official, and VAR with individual IDs.

Share this article:
โ† Back to blog