{"id":1250,"date":"2025-12-17T20:08:00","date_gmt":"2025-12-17T17:08:00","guid":{"rendered":"http:\/\/api-sport.pro\/?p=1250"},"modified":"2025-12-17T20:08:00","modified_gmt":"2025-12-17T17:08:00","slug":"como-crear-un-widget-de-estadisticas-del-partido-en-javascript-una-guia-detallada","status":"publish","type":"post","link":"https:\/\/api-sport.pro\/es\/como-crear-un-widget-de-estadisticas-del-partido-en-javascript-una-guia-detallada\/","title":{"rendered":"C\u00f3mo crear un widget de estad\u00edsticas de partidos en JavaScript: una gu\u00eda detallada"},"content":{"rendered":"<div class=\"table-of-contents\">\n<div class=\"table-of-contents-title\">Contenidos<\/div>\n<ul class=\"table-of-contents-ul\">\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-1\">\u00bfQu\u00e9 es un widget de estad\u00edsticas de partidos y qu\u00e9 datos muestra?<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-2\">C\u00f3mo elegir una API de eventos deportivos para el widget de estad\u00edsticas de partidos.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-3\">C\u00f3mo obtener estad\u00edsticas de partidos de f\u00fatbol a trav\u00e9s de la API en JavaScript.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-4\">Estructura de datos del partido de la API y preparaci\u00f3n para la visualizaci\u00f3n en el widget.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-5\">Ejemplo de c\u00f3digo JavaScript para un widget de estad\u00edsticas de partidos con HTML y CSS.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-6\">C\u00f3mo actualizar estad\u00edsticas de partidos en tiempo real a trav\u00e9s de la API.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-7\">Integrando el widget de estad\u00edsticas de partidos en un sitio web y errores comunes al trabajar con la API.<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-1\">\u00bfQu\u00e9 es un widget de estad\u00edsticas de partidos y qu\u00e9 datos muestra?<\/h2>\n<p>El widget de estad\u00edsticas de partidos en JavaScript es un bloque interactivo que se incrusta en un sitio web y muestra m\u00e9tricas clave del juego en un formato visual amigable. Este widget funciona sobre la API de eventos deportivos, recupera datos brutos del partido y los transforma en tablas, gr\u00e1ficos, indicadores de posesi\u00f3n y l\u00edneas de tiempo de eventos comprensibles.<\/p>\n<p>Basado en la API de Eventos Deportivos, puedes mostrar pr\u00e1cticamente cualquier m\u00e9trica: puntuaci\u00f3n por mitades, minuto actual del partido, alineaciones de equipos, estad\u00edsticas detalladas sobre tiros, posesi\u00f3n, duelos, faltas, tarjetas y c\u00f3rners. Adem\u00e1s, est\u00e1n disponibles eventos en vivo (goles, sustituciones, tarjetas, VAR), as\u00ed como bloques extendidos como m\u00e9tricas xG, revisiones de video y res\u00famenes del partido, si est\u00e1n presentes en la fuente. Para casas de apuestas y servicios anal\u00edticos, tambi\u00e9n es importante que la misma API pueda mostrar cuotas sobre resultados y totales, as\u00ed como la din\u00e1mica de cambios en las l\u00edneas.<\/p>\n<p>Un widget de estad\u00edsticas bien implementado se convierte en un punto de retenci\u00f3n de audiencia: en medios deportivos, aumenta la profundidad de visualizaci\u00f3n; en el sitio de una casa de apuestas, ayuda al jugador a tomar una decisi\u00f3n de apuesta; y en una comunidad de aficionados o blog, hace que el contenido sea din\u00e1mico y \u00absimilar a un juego\u00bb. Al utilizar una API lista como el servicio <a href=\"http:\/\/api-sport.pro\/es\/\">api-sport.pro<\/a>, puedes obtener r\u00e1pidamente datos detallados sobre f\u00fatbol, baloncesto, hockey, tenis, tenis de mesa, deportes electr\u00f3nicos y otros deportes y mostrarlos en una interfaz unificada del widget.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-2\">C\u00f3mo elegir una API de eventos deportivos para el widget de estad\u00edsticas de partidos.<\/h2>\n<p>El primer paso para crear un widget estable es elegir un proveedor de datos confiable. Es importante que la API cubra los deportes y torneos necesarios. En la API de Eventos Deportivos, esto se resuelve a trav\u00e9s del endpoint <code>\/v2\/deporte<\/code>, que devuelve una lista de deportes soportados (f\u00fatbol, hockey, baloncesto, tenis, tenis de mesa, deportes electr\u00f3nicos y otros). Luego, a trav\u00e9s de categor\u00edas y torneos, seleccionas campeonatos espec\u00edficos que estar\u00e1n disponibles en tu widget, utilizando, por ejemplo, m\u00e9todos <code>\/v2\/{sportSlug}\/categor\u00edas<\/code> \u0438 <code>\/v2\/{sportSlug}\/categor\u00edas\/{categoryId}<\/code> teniendo en cuenta el campo. <code>torneosPredeterminados<\/code>.<\/p>\n<p>La profundidad y estructura de las estad\u00edsticas son igualmente importantes. Un widget moderno deber\u00eda ser capaz de mostrar no solo la puntuaci\u00f3n, sino tambi\u00e9n m\u00e9tricas avanzadas. En la API de Eventos Deportivos, el objeto de partido contiene campos <code>estad\u00edsticasDelPartido<\/code> con desgloses por per\u00edodos y grupos (\u00abResumen del partido\u00bb, \u00abTiros\u00bb, \u00abDuelos\u00bb, etc.), as\u00ed como <code>eventosEnVivo<\/code> para mostrar la l\u00ednea de tiempo de eventos. Para proyectos de apuestas, la presencia del campo <code>oddsBase<\/code>, que devuelve mercados de apuestas y cuotas (incluyendo en vivo), as\u00ed como el historial de sus cambios, es cr\u00edtico. Todo esto permite construir tanto widgets simples como avanzados sobre la misma API.<\/p>\n<p>Tambi\u00e9n vale la pena evaluar las caracter\u00edsticas t\u00e9cnicas: estabilidad de disponibilidad, velocidad de respuesta, l\u00edmites de solicitudes justos, documentaci\u00f3n clara y la presencia de ejemplos de c\u00f3digo. La plataforma <a href=\"http:\/\/api-sport.pro\/es\/\">por el API de eventos deportivos api-sport.ru<\/a> est\u00e1 orientada a desarrolladores: ofrece descripciones detalladas de OpenAPI, expande regularmente el conjunto de deportes y campos, y pronto complementar\u00e1 la interfaz REST con un flujo WebSocket para actualizaciones de estad\u00edsticas en tiempo real y herramientas de IA para an\u00e1lisis. Esto simplifica la escalabilidad del proyecto y la adici\u00f3n de nuevos deportes sin reescribir completamente el widget.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-3\">C\u00f3mo obtener estad\u00edsticas de partidos de f\u00fatbol a trav\u00e9s de la API en JavaScript.<\/h2>\n<p>Para comenzar a trabajar con los datos, necesitas una clave API. En el ecosistema de api-sport.ru, se emite en la cuenta personal del desarrollador. Despu\u00e9s de registrarte, ve a <a href=\"https:\/\/app.api-sport.ru\">tu cuenta personal<\/a>, genera la clave y \u00fasala en el encabezado <code>Autorizaci\u00f3n<\/code> para todas las solicitudes a los puntos finales REST. Sin una clave v\u00e1lida, el servidor devolver\u00e1 un error de autorizaci\u00f3n y los datos del partido no estar\u00e1n disponibles.<\/p>\n<p>El escenario b\u00e1sico para obtener estad\u00edsticas de partidos de f\u00fatbol en JavaScript se ve as\u00ed: conoces el ID del partido (<code>idPartido<\/code>) y el deporte (<code>f\u00fatbol<\/code>). A continuaci\u00f3n, env\u00edas una solicitud GET al m\u00e9todo <code>\/v2\/f\u00fatbol\/partidos\/{matchId}<\/code> en el host de la API. En respuesta, recibes un objeto <code>partido<\/code> con todos los campos: estado, puntuaci\u00f3n, equipos, detallado <code>estad\u00edsticasDelPartido<\/code>, un array <code>eventosEnVivo<\/code>, y si es necesario, cuotas <code>oddsBase<\/code>. A continuaci\u00f3n se muestra un ejemplo de una solicitud simple usando <code>obtener<\/code> en el navegador.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\nconst API_KEY = 'YOUR_API_KEY';\nconst MATCH_ID = 14570728; \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 ID \u043c\u0430\u0442\u0447\u0430\nasync function loadMatchStatistics() {\n  const response = await fetch(\n    `https:\/\/api.api-sport.ru\/v2\/football\/matches\/${MATCH_ID}`,\n    {\n      headers: {\n        'Authorization': API_KEY\n      }\n    }\n  );\n  if (!response.ok) {\n    throw new Error('\u041e\u0448\u0438\u0431\u043a\u0430 API: ' + response.status);\n  }\n  const match = await response.json();\n  console.log('\u041a\u043e\u043c\u0430\u043d\u0434\u044b:', match.homeTeam.name, '\u2014', match.awayTeam.name);\n  console.log('\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0447\u0435\u0442:', match.homeScore.current, ':', match.awayScore.current);\n  console.log('\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043c\u0430\u0442\u0447\u0430:', match.matchStatistics);\n}\nloadMatchStatistics().catch(console.error);\n<\/pre>\n<p>En la pr\u00e1ctica, llamar\u00e1s a este c\u00f3digo no en la consola, sino dentro de la l\u00f3gica del widget, pasando el objeto <code>partido<\/code> a la funci\u00f3n de renderizado. Es importante proporcionar manejo de errores (por ejemplo, indisponibilidad del partido o problemas de red), as\u00ed como verificar el estado del campo <code>estado<\/code> (por ejemplo, <code>en progreso<\/code>, <code>completado<\/code>, <code>no comenzado<\/code>) y mostrar correctamente el estado del juego en la interfaz.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-4\">Estructura de datos del partido de la API y preparaci\u00f3n para la visualizaci\u00f3n en el widget.<\/h2>\n<p>La respuesta del punto final <code>\/v2\/{sportSlug}\/matches\/{matchId}<\/code> se construye en torno al objeto <code>partido<\/code>. Contiene campos b\u00e1sicos (<code>identificador<\/code>, <code>estado<\/code>, <code>fechaEvento<\/code>, <code>inicioTimestamp<\/code>), informaci\u00f3n sobre el torneo y la temporada, datos sobre el estadio (<code>lugar<\/code>), as\u00ed como objetos de equipo anidados <code>equipoLocal<\/code> \u0438 <code>equipoVisitante<\/code> con sus nombres, logotipos y, si es necesario, plantillas (<code>alineaci\u00f3n<\/code>). El puntaje actual e interino se almacena en objetos <code>puntajeLocal<\/code> \u0438 <code>puntajeVisitante<\/code> con campos <code>actual<\/code>, <code>per\u00edodo1<\/code>, <code>per\u00edodo2<\/code> y similares para otros deportes.<\/p>\n<p>El elemento clave para el widget de estad\u00edsticas es un array <code>estad\u00edsticasDelPartido<\/code>. Se divide en per\u00edodos (<code>per\u00edodo<\/code>: <code>TODO<\/code>, <code>1RO<\/code>, <code>2DO<\/code> etc.). Dentro de cada per\u00edodo, hay un array <code>grupos<\/code>, y dentro de \u00e9l \u2014 un array <code>statisticsItems<\/code> con m\u00e9tricas espec\u00edficas. Cada elemento contiene el nombre de la m\u00e9trica (<code>nombre<\/code>), valores para los equipos locales y visitantes (<code>local<\/code>, <code>visitante<\/code>), valores num\u00e9ricos (<code>costoLocal<\/code>, <code>costoVisitante<\/code>) y la clave del servicio <code>clave<\/code>, lo que facilita mapear la m\u00e9trica al bloque de UI deseado. A continuaci\u00f3n se muestra un fragmento simplificado de la respuesta:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\n\/\/ \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442 JSON-\u043e\u0442\u0432\u0435\u0442\u0430 \u043c\u0430\u0442\u0447\u0430\n{\n  id: 14570728,\n  status: 'inprogress',\n  currentMatchMinute: 30,\n  homeTeam: { id: 195801, name: 'Montevideo Wanderers Reserve' },\n  awayTeam: { id: 195800, name: 'Rival Team' },\n  homeScore: { current: 1, period1: 1, period2: 0 },\n  awayScore: { current: 0, period1: 0, period2: 0 },\n  matchStatistics: &#x5B;\n    {\n      period: 'ALL',\n      groups: &#x5B;\n        {\n          groupName: 'Match overview',\n          statisticsItems: &#x5B;\n            {\n              name: 'Ball possession',\n              home: '54%',\n              away: '46%',\n              key: 'ballPossession'\n            }\n          ]\n        }\n      ]\n    }\n  ]\n}\n<\/pre>\n<p>Antes de mostrar en el widget, tiene sentido normalizar la estructura en un formato m\u00e1s conveniente. Por ejemplo, puedes construir un diccionario por las claves de las estad\u00edsticas: <code>{ posesionDeBal\u00f3n: { local: 54, visitante: 46 }, totalTirosALaPorter\u00eda: { ... } }<\/code>. Esto simplificar\u00e1 la representaci\u00f3n de barras de progreso, gr\u00e1ficos y tablas de comparaci\u00f3n. Si planeas mostrar cuotas y rese\u00f1as en video, asigna campos del objeto del partido por adelantado <code>oddsBase<\/code> \u0438 <code>momentosDestacados<\/code>, para cargarlos en pesta\u00f1as separadas del widget o ventanas emergentes.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-5\">Ejemplo de c\u00f3digo JavaScript para un widget de estad\u00edsticas de partidos con HTML y CSS.<\/h2>\n<p>A continuaci\u00f3n se muestra un ejemplo simplificado pero funcional de un mini-widget para estad\u00edsticas de partidos de f\u00fatbol. Incluye marcado HTML b\u00e1sico, CSS m\u00ednimo para el estilo y c\u00f3digo JavaScript que carga datos de la API de Eventos Deportivos y llena el bloque del widget. En un proyecto real, podr\u00e1s expandirlo con m\u00e9tricas adicionales y adaptarlo al dise\u00f1o deseado.<\/p>\n<p>Primero, definamos el contenedor del widget y varios elementos para mostrar equipos, puntajes y un par de m\u00e9tricas clave.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\" data-no-translation=\"\">\n&lt;div id=&quot;match-widget&quot;&gt;\n  &lt;div class=&quot;mw-header&quot;&gt;\n    &lt;span id=&quot;mw-home-team&quot;&gt;&lt;\/span&gt;\n    &lt;span id=&quot;mw-score&quot;&gt;&lt;\/span&gt;\n    &lt;span id=&quot;mw-away-team&quot;&gt;&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;mw-meta&quot;&gt;\n    &lt;span id=&quot;mw-status&quot;&gt;&lt;\/span&gt;\n    &lt;span id=&quot;mw-minute&quot;&gt;&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;mw-stats&quot;&gt;\n    &lt;div class=&quot;mw-stat-row&quot;&gt;\n      &lt;span&gt;\u0412\u043b\u0430\u0434\u0435\u043d\u0438\u0435 \u043c\u044f\u0447\u043e\u043c&lt;\/span&gt;\n      &lt;span id=&quot;mw-possession-home&quot;&gt;&lt;\/span&gt;\n      &lt;span id=&quot;mw-possession-away&quot;&gt;&lt;\/span&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;mw-stat-row&quot;&gt;\n      &lt;span&gt;\u0423\u0434\u0430\u0440\u044b \u043f\u043e \u0432\u043e\u0440\u043e\u0442\u0430\u043c&lt;\/span&gt;\n      &lt;span id=&quot;mw-shots-home&quot;&gt;&lt;\/span&gt;\n      &lt;span id=&quot;mw-shots-away&quot;&gt;&lt;\/span&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\" data-no-translation=\"\">\n#match-widget {\n  max-width: 420px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 12px;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n.mw-header {\n  display: flex;\n  justify-content: space-between;\n  font-weight: 600;\n  margin-bottom: 8px;\n}\n.mw-meta {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: #777;\n  margin-bottom: 8px;\n}\n.mw-stats {\n  border-top: 1px solid #f0f0f0;\n  padding-top: 8px;\n}\n.mw-stat-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 13px;\n  margin: 4px 0;\n}\n.mw-stat-row span:first-child {\n  flex: 1 1 auto;\n}\n.mw-stat-row span:nth-child(2),\n.mw-stat-row span:nth-child(3) {\n  width: 40px;\n  text-align: center;\n}\n<\/pre>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\nconst API_KEY = 'YOUR_API_KEY';\nconst MATCH_ID = 14570728;\nasync function fetchMatch() {\n  const res = await fetch(\n    `https:\/\/api.api-sport.ru\/v2\/football\/matches\/${MATCH_ID}`,\n    { headers: { 'Authorization': API_KEY } }\n  );\n  if (!res.ok) throw new Error('\u041e\u0448\u0438\u0431\u043a\u0430 API: ' + res.status);\n  return res.json();\n}\nfunction extractStat(match, key) {\n  const allPeriod = match.matchStatistics?.find(s =&gt; s.period === 'ALL');\n  if (!allPeriod) return null;\n  for (const group of allPeriod.groups) {\n    const item = group.statisticsItems.find(i =&gt; i.key === key);\n    if (item) return item;\n  }\n  return null;\n}\nasync function renderMatchWidget() {\n  const match = await fetchMatch();\n  document.getElementById('mw-home-team').textContent = match.homeTeam.name;\n  document.getElementById('mw-away-team').textContent = match.awayTeam.name;\n  document.getElementById('mw-score').textContent =\n    `${match.homeScore.current} : ${match.awayScore.current}`;\n  document.getElementById('mw-status').textContent = match.status;\n  document.getElementById('mw-minute').textContent =\n    match.currentMatchMinute ? match.currentMatchMinute + &quot;'&quot; : '';\n  const possession = extractStat(match, 'ballPossession');\n  const shots = extractStat(match, 'totalShotsOnGoal');\n  if (possession) {\n    document.getElementById('mw-possession-home').textContent = possession.home;\n    document.getElementById('mw-possession-away').textContent = possession.away;\n  }\n  if (shots) {\n    document.getElementById('mw-shots-home').textContent = shots.home;\n    document.getElementById('mw-shots-away').textContent = shots.away;\n  }\n}\nrenderMatchWidget().catch(console.error);\n<\/pre>\n<p>Este ejemplo demuestra un enfoque b\u00e1sico para la integraci\u00f3n. En producci\u00f3n, agregar\u00e1s manejo del estado de carga (pantallas de esqueleto), localizaci\u00f3n de estados, as\u00ed como soporte para diferentes deportes, utilizando <code>sportSlug<\/code> y una interfaz de widget unificada construida sobre los campos universales de la API de Eventos Deportivos.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-6\">C\u00f3mo actualizar estad\u00edsticas de partidos en tiempo real a trav\u00e9s de la API.<\/h2>\n<p>Para deportes en vivo, es importante que el usuario vea los cambios casi instant\u00e1neamente. La forma m\u00e1s sencilla de implementar esto en JavaScript es mediante sondeos peri\u00f3dicos de la API. Estableces un intervalo (por ejemplo, cada 15\u201330 segundos) que vuelve a llamar al endpoint <code>\/v2\/f\u00fatbol\/partidos\/{matchId}<\/code>, compara los nuevos datos con lo que ya se ha renderizado y actualiza solo los elementos de interfaz que han cambiado: puntaje, minuto actual, m\u00e9tricas clave de <code>estad\u00edsticasDelPartido<\/code> y la lista <code>eventosEnVivo<\/code>.<\/p>\n<p>Al usar la plataforma <a href=\"http:\/\/api-sport.pro\/es\/\">api-sport.pro<\/a> este enfoque ya proporciona actualizaciones de estad\u00edsticas fluidas. Pronto, el servicio complementar\u00e1 la interfaz REST con canales WebSocket, lo que le permitir\u00e1 abandonar las consultas frecuentes y recibir eventos a trav\u00e9s de suscripci\u00f3n en modo push. Su widget podr\u00e1 escuchar un partido o torneo espec\u00edfico y reaccionar instant\u00e1neamente a goles, tarjetas, sustituciones y cambios en las cuotas, sin crear una carga innecesaria en la API y el frontend.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\nconst API_KEY = 'YOUR_API_KEY';\nconst MATCH_ID = 14570728;\nlet lastHomeScore = null;\nlet lastAwayScore = null;\nasync function updateMatchLoop() {\n  try {\n    const res = await fetch(\n      `https:\/\/api.api-sport.ru\/v2\/football\/matches\/${MATCH_ID}`,\n      { headers: { 'Authorization': API_KEY } }\n    );\n    if (!res.ok) throw new Error('\u041e\u0448\u0438\u0431\u043a\u0430 API: ' + res.status);\n    const match = await res.json();\n    if (match.homeScore.current !== lastHomeScore ||\n        match.awayScore.current !== lastAwayScore) {\n      lastHomeScore = match.homeScore.current;\n      lastAwayScore = match.awayScore.current;\n      \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0447\u0435\u0442 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0435\n      document.getElementById('mw-score').textContent =\n        `${lastHomeScore} : ${lastAwayScore}`;\n    }\n    if (match.currentMatchMinute) {\n      document.getElementById('mw-minute').textContent =\n        match.currentMatchMinute + &quot;'&quot;;\n    }\n    \/\/ \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c matchStatistics \u0438 liveEvents\n  } catch (e) {\n    console.error(e);\n  }\n}\n\/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u044b\u0435 20 \u0441\u0435\u043a\u0443\u043d\u0434 (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043b\u0438\u043c\u0438\u0442\u044b)\nsetInterval(updateMatchLoop, 20000);\nupdateMatchLoop();\n<\/pre>\n<p>Es importante mantener un equilibrio entre la relevancia y la carga. Considere los l\u00edmites de tasa y la cach\u00e9 en el lado de la API, no establezca un intervalo de 1\u20132 segundos sin una necesidad extrema. Con la aparici\u00f3n de WebSocket de api-sport.ru, podr\u00e1 transitar el widget a una arquitectura con suscripci\u00f3n a eventos, dejando REST para la carga inicial de datos y escenarios de respaldo.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-7\">Integrando el widget de estad\u00edsticas de partidos en un sitio web y errores comunes al trabajar con la API.<\/h2>\n<p>Un widget listo en JavaScript se puede incrustar en casi cualquier sitio web: una p\u00e1gina de aterrizaje est\u00e1tica, un CMS como WordPress, un portal de noticias o una vitrina de casas de apuestas. La opci\u00f3n b\u00e1sica de integraci\u00f3n es colocar el contenedor HTML del widget en la ubicaci\u00f3n deseada de la plantilla y conectar el archivo JS con la l\u00f3gica para cargar y renderizar estad\u00edsticas. Si tiene m\u00faltiples p\u00e1ginas con partidos, puede pasar <code>idPartido<\/code> en el atributo de datos del contenedor o a trav\u00e9s de par\u00e1metros de URL, de modo que el mismo script sirva a m\u00faltiples widgets.<\/p>\n<p>Un error com\u00fan es usar la clave de API directamente en el c\u00f3digo del lado del cliente sin ning\u00fan proxy. Para proyectos p\u00fablicos y de alta carga, es mejor mover todas las solicitudes a la API de Eventos Deportivos al backend (Node.js, PHP, Python) y solo servir datos preparados al frontend desde el servidor. Esto protege la clave de filtraciones y permite una gesti\u00f3n centralizada de la cach\u00e9, l\u00edmites y registros. Otro problema t\u00edpico es ignorar el estado del partido y las zonas horarias: el widget contin\u00faa actualiz\u00e1ndose despu\u00e9s del pitido final o muestra horarios de inicio de partidos incorrectos para usuarios de otras regiones.<\/p>\n<p>Los desarrolladores tambi\u00e9n a veces no tienen en cuenta las caracter\u00edsticas estructurales <code>estad\u00edsticasDelPartido<\/code> y se atan r\u00edgidamente a los nombres textuales de grupos y m\u00e9tricas. Se recomienda confiar en claves estables (<code>clave<\/code> \u0443 <code>statisticsItems<\/code>) y dise\u00f1ar la interfaz de manera que cuando aparezcan nuevos indicadores en la API, se puedan agregar f\u00e1cilmente sin rehacer la l\u00f3gica. Al completar la integraci\u00f3n, pruebe el comportamiento del widget en diferentes estados de partidos (no iniciado, medio tiempo, terminado, pospuesto), en dispositivos m\u00f3viles y durante la indisponibilidad temporal de la API. Al utilizar datos de Eventos Deportivos de api-sport.ru y una arquitectura ordenada, obtendr\u00e1 un widget de estad\u00edsticas estable, r\u00e1pido y escalable que se puede expandir a nuevos deportes y torneos.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Content What is a match statistics widget and what data does it show How to choose a sports events API for the match statistics widget How to get football match statistics via API in JavaScript Match data structure from API and preparation for display in the widget Example JavaScript code for the match statistics widget with HTML and CSS How to update statistics [\u2026]<\/p>","protected":false},"author":1,"featured_media":1249,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","faq":"[{\"question\":\"\u041a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u043c\u0430\u0442\u0447\u0430 \u0447\u0435\u0440\u0435\u0437 Sport Events API?\",\"answer\":\"\u0427\u0435\u0440\u0435\u0437 Sport Events API \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0441\u0447\u0435\u0442 \u043f\u043e \u043f\u0435\u0440\u0438\u043e\u0434\u0430\u043c, \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043c\u0438\u043d\u0443\u0442\u0443, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u043c\u0430\u0442\u0447\u0430 (\u0432\u043b\u0430\u0434\u0435\u043d\u0438\u0435, \u0443\u0434\u0430\u0440\u044b, \u0444\u043e\u043b\u044b, \u0435\u0434\u0438\u043d\u043e\u0431\u043e\u0440\u0441\u0442\u0432\u0430 \u0438 \u0434\u0440.), live-\u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u0433\u043e\u043b\u044b, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0437\u0430\u043c\u0435\u043d\u044b), \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u0431\u0443\u043a\u043c\u0435\u043a\u0435\u0440\u043e\u0432 \u0438 \u0432\u0438\u0434\u0435\u043e\u043e\u0431\u0437\u043e\u0440\u044b. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u043f\u043e\u043b\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u044b\u0439, \u0442\u0430\u043a \u0438 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438.\"},{\"question\":\"\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c backend \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0441 API \u0441\u043f\u043e\u0440\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439?\",\"answer\":\"\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a API \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043a\u043b\u044e\u0447 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 Authorization. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u0438 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043b\u0443\u0447\u0448\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c backend-\u043f\u0440\u043e\u043a\u0441\u0438: \u044d\u0442\u043e \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u043a\u043b\u044e\u0447 \u043e\u0442 \u0443\u0442\u0435\u0447\u043a\u0438, \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043b\u0438\u043c\u0438\u0442\u0430\u043c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434 \u043d\u0443\u0436\u0434\u044b \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.\"},{\"question\":\"\u041a\u0430\u043a \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u043c\u0430\u0442\u0447\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438?\",\"answer\":\"\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0434\u043b\u044f REST-\u043e\u043f\u0440\u043e\u0441\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 10\u201330 \u0441\u0435\u043a\u0443\u043d\u0434, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0430\u0440\u0438\u0444\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0438 \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0439 \u0441\u0432\u0435\u0436\u0435\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c API \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 api-sport.ru \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c WebSocket-\u0441\u0442\u0440\u0438\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0438\u0445 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0447\u0430\u0441\u0442\u044b\u0445 \u043e\u043f\u0440\u043e\u0441\u043e\u0432.\"},{\"question\":\"\u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0432\u0438\u0434\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u0441\u043f\u043e\u0440\u0442\u0430?\",\"answer\":\"\u0414\u0430. Sport Events API \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u0430\u0442\u0447\u0430 \u0438 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u0441\u043f\u043e\u0440\u0442\u0430. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0431\u0449\u0438\u0435 \u043f\u043e\u043b\u044f (status, score, matchStatistics, liveEvents) \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u044e\u0447\u0438 \u043c\u0435\u0442\u0440\u0438\u043a, \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u0444\u0443\u0442\u0431\u043e\u043b, \u0445\u043e\u043a\u043a\u0435\u0439, \u0431\u0430\u0441\u043a\u0435\u0442\u0431\u043e\u043b, \u0442\u0435\u043d\u043d\u0438\u0441 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u044b.\"},{\"question\":\"\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c API-\u043a\u043b\u044e\u0447 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 api-sport.ru?\",\"answer\":\"\u041d\u0443\u0436\u043d\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 api-sport.ru \u0438 \u0437\u0430\u0439\u0442\u0438 \u0432 \u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u0431\u0438\u043d\u0435\u0442 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 app.api-sport.ru. \u0412 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f API-\u043a\u043b\u044e\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 Authorization \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a Sport Events API.\"}]","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_head":"<title>Match statistics widget in JavaScript \u2014 Sports events API<\/title>\n<meta name=\"description\" content=\"Step-by-step guide to creating a match statistics widget in JavaScript using the Sport Events API. For websites, media, and betting services.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/api-sport.pro\/es\/como-crear-un-widget-de-estadisticas-del-partido-en-javascript-una-guia-detallada\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Match statistics widget in JavaScript \u2014 Sports events API\" \/>\n<meta property=\"og:description\" content=\"Step-by-step guide to creating a match statistics widget in JavaScript using the Sport Events API. For websites, media, and betting services.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/api-sport.pro\/es\/como-crear-un-widget-de-estadisticas-del-partido-en-javascript-una-guia-detallada\/\" \/>\n<meta property=\"og:site_name\" content=\"Sports Events API\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-17T17:08:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-vidzhet-statistiki-matcha-na-javascript-podrobnoe-rukovodstvo_posts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1376\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/\",\"url\":\"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/\",\"name\":\"Match statistics widget in JavaScript \u2014 Sports events API\",\"isPartOf\":{\"@id\":\"https:\/\/api-sport.pro\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-vidzhet-statistiki-matcha-na-javascript-podrobnoe-rukovodstvo_posts.jpg\",\"datePublished\":\"2025-12-17T17:08:00+00:00\",\"author\":{\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601\"},\"description\":\"Step-by-step guide to creating a match statistics widget in JavaScript using the Sport Events API. For websites, media, and betting services.\",\"breadcrumb\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#primaryimage\",\"url\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-vidzhet-statistiki-matcha-na-javascript-podrobnoe-rukovodstvo_posts.jpg\",\"contentUrl\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-vidzhet-statistiki-matcha-na-javascript-podrobnoe-rukovodstvo_posts.jpg\",\"width\":1376,\"height\":768,\"caption\":\"\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u043c\u0430\u0442\u0447\u0430 \u043d\u0430 JavaScript: \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/api-sport.pro\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a match statistics widget in JavaScript: a detailed guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/api-sport.pro\/#website\",\"url\":\"https:\/\/api-sport.pro\/\",\"name\":\"Sports Events API\",\"description\":\"Sports Events API\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/api-sport.pro\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/api-sport.pro\"],\"url\":\"https:\/\/api-sport.pro\/es\/author\/admin\/\"}]}<\/script>","yoast_head_json":{"title":"Widget de estad\u00edsticas del partido en JavaScript \u2014 API de eventos deportivos","description":"Gu\u00eda paso a paso para crear un widget de estad\u00edsticas de partidos en JavaScript utilizando la API de Eventos Deportivos. Para sitios web, medios y servicios de apuestas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/api-sport.pro\/es\/como-crear-un-widget-de-estadisticas-del-partido-en-javascript-una-guia-detallada\/","og_locale":"es_ES","og_type":"article","og_title":"Match statistics widget in JavaScript \u2014 Sports events API","og_description":"Step-by-step guide to creating a match statistics widget in JavaScript using the Sport Events API. For websites, media, and betting services.","og_url":"https:\/\/api-sport.pro\/es\/como-crear-un-widget-de-estadisticas-del-partido-en-javascript-una-guia-detallada\/","og_site_name":"Sports Events API","article_published_time":"2025-12-17T17:08:00+00:00","og_image":[{"width":1376,"height":768,"url":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-vidzhet-statistiki-matcha-na-javascript-podrobnoe-rukovodstvo_posts.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/","url":"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/","name":"Widget de estad\u00edsticas del partido en JavaScript \u2014 API de eventos deportivos","isPartOf":{"@id":"https:\/\/api-sport.pro\/#website"},"primaryImageOfPage":{"@id":"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#primaryimage"},"image":{"@id":"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-vidzhet-statistiki-matcha-na-javascript-podrobnoe-rukovodstvo_posts.jpg","datePublished":"2025-12-17T17:08:00+00:00","author":{"@id":"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601"},"description":"Gu\u00eda paso a paso para crear un widget de estad\u00edsticas de partidos en JavaScript utilizando la API de Eventos Deportivos. Para sitios web, medios y servicios de apuestas.","breadcrumb":{"@id":"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#primaryimage","url":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-vidzhet-statistiki-matcha-na-javascript-podrobnoe-rukovodstvo_posts.jpg","contentUrl":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-vidzhet-statistiki-matcha-na-javascript-podrobnoe-rukovodstvo_posts.jpg","width":1376,"height":768,"caption":"\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u043c\u0430\u0442\u0447\u0430 \u043d\u0430 JavaScript: \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e"},{"@type":"BreadcrumbList","@id":"https:\/\/api-sport.pro\/how-to-create-a-match-statistics-widget-in-javascript-a-detailed-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/api-sport.pro\/"},{"@type":"ListItem","position":2,"name":"How to create a match statistics widget in JavaScript: a detailed guide"}]},{"@type":"WebSite","@id":"https:\/\/api-sport.pro\/#website","url":"https:\/\/api-sport.pro\/","name":"API de Eventos Deportivos","description":"API de Eventos Deportivos","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/api-sport.pro\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601","name":"administrador","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/api-sport.pro\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g","caption":"admin"},"sameAs":["http:\/\/api-sport.pro"],"url":"https:\/\/api-sport.pro\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/comments?post=1250"}],"version-history":[{"count":3,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1250\/revisions"}],"predecessor-version":[{"id":1680,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1250\/revisions\/1680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/media\/1249"}],"wp:attachment":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/media?parent=1250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/categories?post=1250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/tags?post=1250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}