Activa las notificaciones push PhoneGap Spain

Foro

Home Forums Programación Javascript Extraer información específica de un xml

This topic contains 31 replies, has 4 voices, and was last updated by  Banshi 1 mes .

Viendo 15 respuestas - de la 1 a 15 (de 32 en total)
  • Extraer información específica de un xml

    Intervenciones
  • Banshi 
    Participant

    Buenas tardes,
    Estoy desarrollando una aplicación que tiene un apartado para escuchar podcast. He usado un código que he visto por ahí perdido y tiene esta función que extrae el contenido y lo muestra con el formato que se le da.

     Code: Función Javascript (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.

    Feed.prototype.createListElement = function(item) {
            var $item = $(item);
            
            var link = this.escape($item.find('link').text());
            var title = this.escape($item.find('title').text());
            var description = this.escape(strip_tags($item.find('description').text()));
            var date = new Date($item.find('pubDate').text());

            return '<li class="feed-item" data-link="' + link + '">' +
                '<time>' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '</time>' +
                '<h2>' + title + '</h2><p>' + description + '</p></li>';
        };

        Feed.prototype.escape = function(string) {
            return htmlspecialchars(string, 'ENT_QUOTES');
        };
        
        return Feed;

    El la información la extrae de esta parte del xml:

     Code: Parte de XML (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.

    <item>
    <title>
    <![CDATA[ Texto de prueba ]]>
    </title>
    <link>
    https://www.ivoox.com/prueba-mp3_rf_20199509_1.html
    </link>
    <enclosure url="https://www.ivoox.com/prueba_mf_20199509_feed_1.mp3" type="audio/mpeg" length="200522"/>
    <description>
    <![CDATA[
    Texto de prueba
    ]]>
    </description>
    <pubDate>Mon, 07 Aug 2017 12:50:02 +0200</pubDate>
    <itunes:duration>00:25</itunes:duration>
    <guid>http://www.ivoox.com/20199509</guid>
    </item>

    La información la extrae y muestra correctamente, pero me gustaría conseguir también la url del tag <enclosure>. ¿Se os ocurre algo para cambiar en la función para extraer dicha información? Muchas gracias.

    Saludos.


    Banshi 
    Participant

    ¿Alguien me puede echar un cable?


    tekofer
    tekofer 
    Participant

    Puedes compartir el fuente? para poder revisar un poco mas y poder darte una mano? tekofer@gmail.com


    Banshi 
    Participant

    Buenas @tefoker! Te he mandado un mail con el código fuente

    Saludos.


    Jose Jesus Perez Rivas
    Jose Jesus Perez Rivas 
    Keymaster

    Hola @tekofer y @banshi,

    Estaría bien que la solución fuera compartida en el foro, de este modo ayudaremos a otros developers de la comunidad.

    Saludos! :)


    CEO y Director de desarrollo en Cero y Uno Desarrollamos Aplicaciones – ¿tienes algún proyecto? ¡trabajemos juntos! contacto@ceroyuno.eshttp://www.ceroyuno.es Fundador de PhoneGap Spain http://www.phonegapspain.com Twitter: https://twitter.com/JoseJ_PR


    Banshi 
    Participant

    Buenas,
    @Jose no recibí ninguna respuesta de @tefoker, ni he solucionado el problema.

    Saludos.


    tekofer
    tekofer 
    Participant

    Hola Banshi, te envie el ejemplo por mail.

    Como lo comenta Jose la forma de solucionarlos fue convertir el XML a JSON para que sea mas facil de manejarlo, me apoye en la api y documentacion de https://api.rss2json.com con la ayuda desde https://gist.github.com/cmbaughman/9370106 y el usuario molayli

    Cordialmente,
    Diego Saavedra


    Aeon
    Aeon 
    Participant

    yo hubiera usado el parseXML de jquery para hacerlo, creo que es mas sencillo que convertir el xml a json


    tekofer
    tekofer 
    Participant

    Aeon, puedes compartirnos la solucion con parseXML

    Cordialmente,
    tekofer


    Aeon
    Aeon 
    Participant
     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.

    var xml= '<item>'+
    '<title>'+
    '<![CDATA[ Texto de prueba ]]>'+
    '</title>'+
    '<link>'+
    '"https://www.ivoox.com/prueba-mp3_rf_20199509_1.html"'+
    '</link>'+
    '<enclosure url="https://www.ivoox.com/prueba_mf_20199509_feed_1.mp3" type="audio/mpeg" length="200522"/>'+
    '<description>'+
    '<![CDATA[Texto de prueba]]>'+
    '</description>'+
    '<pubDate>Mon, 07 Aug 2017 12:50:02 +0200</pubDate>'+
    '<itunes:duration>00:25</itunes:duration>'+
    '<guid>http://www.ivoox.com/20199509</guid>'+
    '</item>';
    xml=xml.replace("<itunes:duration>","<itunes-duration>");
    xml=xml.replace("</itunes:duration>","</itunes-duration>");
    var xmlDoc = $.parseXML(xml);
    xml = $(xmlDoc);
    var link = xml.find("link");
    var title = xml.find("title");
    var description = xml.find("description");
    var date = xml.find("pubDate");
    var enclosure = xml.find( "enclosure" );

    para imprimir los datos:

     Code: arbitrary (select
    1.
    2.
    3.
    4.

    link .text();
    title .text();
    description .text();
    date .text();

    y para el caso de enclausure que quiere obtener la url solo bastaria con
    1.  enclosure.attr("url")


    Banshi 
    Participant

    Gracias a todos por responder. Aún no me he podido poner a probarlo, porque he estado liado. A ver si este fin de semana consigo hacerlo.

    Saludos


    Banshi 
    Participant

    Buenas tardes,
    @Aeon en el código que has puesto a var xml le asignas directamente el texto del interior del xml, pero si lo que tienes es una url con ese xml, ¿también vale?.

    @tefoker me ha servido tu código, muchas gracias.

    Ahora tengo el siguiente problema, os muestro el código html completo:

     Code: html (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.
    50.
    51.
    52.
    53.
    54.
    55.
    56.
    57.
    58.
    59.
    60.
    61.
    62.
    63.
    64.
    65.
    66.
    67.
    68.
    69.
    70.
    71.
    72.
    73.
    74.
    75.
    76.
    77.
    78.
    79.
    80.
    81.
    82.
    83.
    84.
    85.
    86.
    87.
    88.
    89.
    90.
    91.
    92.
    93.
    94.
    95.
    96.
    97.
    98.
    99.
    100.
    101.
    102.
    103.
    104.
    105.
    106.
    107.
    108.
    109.
    110.
    111.
    112.
    113.
    114.
    115.
    116.
    117.
    118.
    119.
    120.
    121.
    122.
    123.
    124.
    125.
    126.
    127.
    128.
    129.
    130.
    131.
    132.
    133.
    134.
    135.
    136.
    137.
    138.
    139.
    140.
    141.
    142.
    143.
    144.
    145.
    146.
    147.
    148.
    149.
    150.
    151.
    152.
    153.
    154.
    155.
    156.
    157.
    158.
    159.
    160.
    161.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

      <title>Radio</title>
          <style>
          .flex-container {
            display: -webkit-flex;
              display: flex;
              height: 100%;
              justify-content: center;
              align-items: center;
          }

          #radio{
            z-index: 1;
            width: 50%;
          }

          #logo{
            top: 10%;
            width: 70%;
          }
          #fecha {
              font-size: 90%;
              color: #006ADB;
          }
          
        </style>

      <!--Include JQM and JQ-->
      <link rel="stylesheet" href="css/themes/jqmfb.min.css" />
      <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.structure.min.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
      <script src="js/jquery.animate-enhanced.min.js"></script>
      
      <!--JQM globals you can edit or remove file entirely... note it needs to be loaded before jquerymobile js -->
      <script src="js/jqm.globals.js"></script>
      
      <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

      <!--JQM SlideMenu-->
      <link rel="stylesheet" href="css/jqm.slidemenu.css" />
      <script src="js/jqm.slidemenu.js"></script>
    </head>
    <body>

      <div id="slidemenu">

        <h3>MENU</h3>

        <ul>
          <li><a href="#main_page"><img src="img/smico3.png" />Radio FM</a></li>
          <li><a href="#another_page"><img src="img/smico2.png" />Podcast</a></li>
        </ul>

      </div>

      <div id="main_page">

        <div>
          <a href="#">Menu</a>
          <h1><img src="img/logo.png" id="logo" /></h1>
        </div>

        <div>
            <div><img src="img/boton.png" id="radio" /></div>  
        </div>

      </div>
      
      <div id="another_page">

        <div>
          <a href="#">Menu</a>
          <h1>Menu</h1>
        </div>

        <div>
          <div id="target"></div>
          <script>
                var rssUrl = "https://www.ivoox.com/radio-marca-granada_fg_f1443013_filtro_1.xml"; //URL a convertir en JSON
                function parseRSS(url, callback) {
                  $.ajax({
                    url: 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(url), //API to JSON
                    dataType: 'json',
                    success: function(data) {
                      callback(data);
                      
                    }
                  });
                }
                html = "<table>";
                parseRSS(rssUrl, function(rss) {
                    var items = rss.items;
                    for(i = items.length-1; i >=0; i--) {
                      html += "<tr><td>";
                      fecha = items[i].pubDate;
                      anio = fecha.substring(0,4);
                      mes = fecha.substring(6,7);
                      dia = fecha.substring(9,10);
                      html += "<p id='fecha'>" + dia + "/" + mes + "/" + anio + "</p>";
                      html += "<p>" + items[i].title + "</p>"; //Acceder al title
                      variable = items[i].enclosure.link;
                          html += "<p onclick='reproducir(variable);'><a href='" + items[i].enclosure.link + "' rel='external'>Play</a></p>";  //Acceder al enclosure.link
                          html += "</td></tr>";
                    }
                    html += "</table>";
                    $("div#target").html(html);
                });
          </script>
        </div>

      </div>
      <script type="text/javascript" src="cordova.js"></script>
        
        <script>
            document.addEventListener("deviceready",function(){
              var radio = document.getElementById("radio");
              var sound = false;
              //var sonido = false;
              var reproductor = new Media("http://streaming5.elitecomunicacion.es:8212/stream");
              //var podcast = document.getElementById("inicio");

                radio.addEventListener("click", function(){
                if (!sound) {
                  reproductor.play();
                  radio.setAttribute("src","img/boton-play.png");
                  sound = true;
                } else {
                  reproductor.pause();
                  radio.setAttribute("src","img/boton-pause.png");
                  sound = false;
                }
              });

              /*podcast.addEventListener("click",function(){
                  reproductor.pause();
                  radio.setAttribute("src","img/boton.png");
                  sound = false;
                  alert("hola");
              });*/
              },false);

            /*function reproducir(link){
                var podcast = new Media(link);
                if (!sonido) {
                    podcast.play();
                    sonido = true;
                } else {
                    podcast.pause();
                    sonido = false;
                }
            }*/
        </script>
      
    </body>
    </html>

    Y el problema viene en la línea 108:
    1.  "<p onclick='reproducir(variable);'><a href='" + items[i].enclosure.link + "' rel='external'>Play</a></p>";  //Acceder al enclosure.link

    A la hora de mostrar el link sale un enlace que al pulsar me abre el navegador web fuera de la aplicación con la url deseada. En mi caso me gustaría reproducir el audio dentro de la aplicación, pero he probado distintas formas y nunca me lo reproduce. He dejado texto comentado con las cosas que he probado. Para que entendais el programa, tengo una parte principal donde sale un audio general independiente a los podcast (funciona correctamente) y después tengo otra página donde sale un listado de podcast, en la que me gustaría reproducir el audio que se seleccione. El contenido de las “páginas” está todo en el mismo archivo index.html. Muchas gracias.

    • This reply was modified 3 meses, 2 semanas by  Banshi.
    • This reply was modified 3 meses, 2 semanas by  Banshi.
    • This reply was modified 3 meses, 2 semanas by  Banshi.

    • This reply was modified 3 meses, 2 semanas by  Banshi.
    • This reply was modified 3 meses, 2 semanas by  Banshi.
    • This reply was modified 3 meses, 2 semanas by  Banshi.
    Banshi 
    Participant

    Ya he resuelto el problema. Estaba intentando crear una variable media para reproducir el archivo y no funcionaba. Como es un archivo mp3 simplemente he puesto la etiqueta audio con el link obtenido.
    Ya lo único que me gustaría cambiar es lo de la obtención de los datos del XML, tal y como está funciona, pero no me gusta depender de https://api.rss2json.com, me gustaría tratar los datos en local con algún js. Seguiré probando con lo que ha puesto @Aeon. Muchas gracias.

    Saludos


    Aeon
    Aeon 
    Participant

    si lo tienes desde una url con jquery desde el ajax lo puedes recuperar como xml, algo asi:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.

    $(document).ready(function(){
         $.ajax({
            type: "GET",
            url: "https://www.ivoox.com/radio-marca-granada_fg_f1443013_filtro_1.xml",
            dataType: "xml",
            success: function(xml) {
                var enclosure=$(xml).find("enclosure").attr('url');
                console.log(enclosure);
            }
        });
    })


    tekofer
    tekofer 
    Participant

    Hola Aeon, realice la prueba con el fuente que colocaste pero genera problemas de Cross-Origin

    1.  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.ivoox.com/radio-marca-granada_fg_f1443013_filtro_1.xml. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

    Como se puede solucionar este error?

    Gracias,
    Tekofer


Viendo 15 respuestas - de la 1 a 15 (de 32 en total)

You must be logged in to reply to this topic.