2

En el código hago una llamada a la API de youtube y extraigo una serie de datos. Necesito hacer que los suscriptores se actualicen cada segundo con el css del odómetro.

Este es el código actual.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<title>Documento sin título</title>
</head>

<body>
    <?php 

echo"<div id='odometer' class='odometer'>123</div><br/>";
echo"<div id='odometer1' class='odometer'>123</div>";
?>                      
<script>

setTimeout(function(){
    <?php 
        $api_key = "mi_key";
            $canales = array( 
            array("nombre"=>"T-Series","id"=>"UCq-Fj5jknLsUf-MWSy4_brA"), 
            array("nombre"=>"PewDiePie","id"=>"UC-lHJZR3Gqxm24_Vd_AJ5Yw"), 
            array("nombre"=>"5-Minutecrafts","id"=>"UC295-Dw_tDNtZXFeAPAW6Aw"));
            $count = count($canales);
            for ($i = 0; $i < $count; $i++) {
            $channel_id[$i] = $canales[$i]["id"];

            $estadisticas[$i] = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=statistics&id='.$channel_id[$i].'&key='.$api_key);
            $estadisticas_decoded[$i] = json_decode($estadisticas[$i] , true);
            $snippets[$i] = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=snippet&id='.$channel_id[$i].'&key='.$api_key);
            $snippets_decoded[$i] = json_decode($snippets[$i], true);
            }

            for ($i = 0; $i < $count; $i++) {
            $top[] = array('nombre'=>$snippets_decoded[$i]['items'][0]['snippet']['title'],'imagen'=>$snippets_decoded[$i]['items'][0]['snippet']['thumbnails']['default']['url'],'suscriptores'=>$estadisticas_decoded[$i]['items'][0]['statistics']['subscriberCount'],'videos'=>$estadisticas_decoded[$i]['items'][0]['statistics']['videoCount'],'videos_vistos'=>$estadisticas_decoded[$i]['items'][0]['statistics']['viewCount']);
            }           
            foreach ($top as $key => $row) {
    $suscriptores[$key] = $row['suscriptores'];
}    
array_multisort($suscriptores, SORT_DESC, $top);
$objJson=json_encode($top);

?>
    var obj = JSON.parse('<?= $objJson; ?>');
    document.getElementById("odometer").innerHTML= obj[0].suscriptores;
    document.getElementById("odometer1").innerHTML= obj[1].suscriptores;
}, 5000);
</script>
</body>
</html>

Espero puedan ayudarme y gracias por adelantado!

4
  • Hola, para hacer eso tendrías que usar algo como ajax, si la API de youtube funciona correctamente y te envía los datos, el resto no es tan complicado. Commented el 27 jul. 2019 a las 13:57
  • Hola gracias por tu respuesta, si he leido mucho acerca de hacerlo con ajax, imagino que para cualquier programado es muy sencillo, pero yo he probado muchas maneras y no consigo actualizar cada x segundos los suscriptores con el odómetro. He llegado actualizar sin odómetro, pero con odómetro no. Puede usted por favor ayudarme?
    – Marc Vera
    Commented el 27 jul. 2019 a las 14:04
  • Por lo que veo esta es tu pagina principal, necesitaras crear otra pagina para consumir el servicio, imagino que el código al menos muestra la información la primera vez cuando se carga la pagina Commented el 27 jul. 2019 a las 14:12
  • Si, la he puesto como página principal el php. He realizado un load en un <div> desde otra página html pero entonces no me carga correctamente, me va imprimiendo los divs cada x segundos, en lugar de actualizar en el mismo <div>. Si, la primera vez que lanzo la página todo funciona correctamente pero después ya no hace nada.
    – Marc Vera
    Commented el 27 jul. 2019 a las 14:18

1 respuesta 1

3

Para que el odometro se actualice cada cierto tiempo y muestre la cantidad de suscriptores actual debes tener una pagina separada de servicio en la que obtengas la información y debes colocar un código que consuma el servicio; para eso primero colocas el código php donde obtienes la información de youtube en la pagina "servicio.php":

servicio.php

<?php 
    $api_key = "mi_key";
    $canales = array( 
        array("nombre"=>"T-Series","id"=>"UCq-Fj5jknLsUf-MWSy4_brA"), 
        array("nombre"=>"PewDiePie","id"=>"UC-lHJZR3Gqxm24_Vd_AJ5Yw"), 
        array("nombre"=>"5-Minutecrafts","id"=>"UC295-Dw_tDNtZXFeAPAW6Aw"));
    $count = count($canales);
    for ($i = 0; $i < $count; $i++) {
        $channel_id[$i] = $canales[$i]["id"];

        $estadisticas[$i] = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=statistics&id='.$channel_id[$i].'&key='.$api_key);
        $estadisticas_decoded[$i] = json_decode($estadisticas[$i] , true);
        $snippets[$i] = file_get_contents('https://www.googleapis.com/youtube/v3/channels?part=snippet&id='.$channel_id[$i].'&key='.$api_key);
        $snippets_decoded[$i] = json_decode($snippets[$i], true);
    }

    for ($i = 0; $i < $count; $i++) {
        $top[] = array('nombre'=>$snippets_decoded[$i]['items'][0]['snippet']['title'],'imagen'=>$snippets_decoded[$i]['items'][0]['snippet']['thumbnails']['default']['url'],'suscriptores'=>$estadisticas_decoded[$i]['items'][0]['statistics']['subscriberCount'],'videos'=>$estadisticas_decoded[$i]['items'][0]['statistics']['videoCount'],'videos_vistos'=>$estadisticas_decoded[$i]['items'][0]['statistics']['viewCount']);
    }           
    foreach ($top as $key => $row) {
        $suscriptores[$key] = $row['suscriptores'];
    }

    array_multisort($suscriptores, SORT_DESC, $top);

    echo json_encode($top);

?>

De esta pagina se obtiene el json del que se extraerán los datos para el odometro.

Luego en la pagina principal colocas los <div> en los que se colocaran los números y para consumir el servicio de la otra pagina puedes usar xmlthttp request:

Pagina Principal

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<title>Suscriptores de Youtube</title>
</head>

<body>
    <div id='odometer' class='odometer'>000</div>
    <br/>
    <div id='odometer1' class='odometer'>000</div>   

</body>
<script type="text/javascript">

    //obtener la informacion del servicio
    function servicio() {
        var xmlhttp;
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var obj = JSON.parse(xmlhttp.responseText);
                document.getElementById("odometer").innerHTML= obj[0].suscriptores;
                document.getElementById("odometer1").innerHTML= obj[1].suscriptores;
            }
        }
        xmlhttp.open("GET","servicio.php",true);
        xmlhttp.send();
    }

    setInterval(function(){ servicio(); }, 3000);

</script>
</html>

En la función servicio() se obtiene la información para actualizar los odometros de la pagina "servicio.php", y con setInterval() la operación se ejecuta cada cierto tiempo (en este caso 3 segundos).

Espero te sea de ayuda, saludos.

2
  • 1
    Me funcionó perfectamente! mucha gracias de verdad. Ahora voy a estudiar con detenimiento el código. Saludos!
    – Marc Vera
    Commented el 27 jul. 2019 a las 15:15
  • @MarcVera de nada, buen fin de semana. Commented el 27 jul. 2019 a las 15:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.