Parsear tablas creadas con javascript

[okik]

hola

Si entras en esta página como ejemplo, verás aparece una tabla.  

https://www.marca.com/futbol/primera-division/clasificacion.html

Esta tabla está creada con javascript.

Antiguamente simplemente obteniendo el código fuente HTML de la página con System.Net.WebClient  podías obtener la clasificación tabla:

Código (html4strict) [Seleccionar] Expandir


<div id="contenedor-portadilla"> <div id="contenido" class="estirar">
<div class="clasificacion borde-caja">
<table class="tablaclasificacion ampliada" id="calsificacion_completa">
<thead>
<tr class="clasifencabezado">
<th colspan="2" class="sinfondo">&nbsp;</th>
<th colspan="7">Totales</th>
<th colspan="7">En casa</th>
<th colspan="7">Fuera</th>

....
<tr>
<td class="posicion ascenso">1</td>
<td class="equipo">Levante</td>
<td class="pj">24</td>
<td class="pg">16</td>
<td class="pe">4</td>
<td class="pp">4</td>
<td class="gf">33</td>
<td class="gc">17</td>
<td class="pts seleccionado">52</td>
<td class="cpj">12</td>
<td class="cpg">10</td>
<td class="cpe">2</td>
<td class="cpp">0</td>
<td class="cgf">19</td>
<td class="cgc">7</td>



No se lo bastante sobre javascript aunque he tratado de encontrar un servidor o enlace desde donde obtiene los datos para construir la tabla. Eso sí sabría hacerlo yo desde javascript, pero no se como o de donde obtiene los datos para construir la tabla. Desglosar cada archivo javascript tratando averiguar como lo hacen sin ser yo un gurú de esto es para mí tarea imposible.

Podría pensarse, una vez la página está cargada guardas y se creará un HTML  con la tabla.... pues no, ya he probado, se ve en blanco. Es fácil de entender cuando desde el navegador abres el un menú emergente y pulsas "ver código fuente de la página". Verás que no existe tal tabla en el código fuente si no como digo llama a un código javascript para crearla, obvio debe ser online. Ya que en los propios código javascript tampoco está la tabla,que si no me equivoco estos acceden online a un servidor desde el cual obtienen los datos para construir la tabla. ¿Un xml quizás? no se.

Sin embargo si que puedo ver la tabla online desde un navegador usando "inspeccionar elemento".

Así que bueno, otro desafío más.



buenas,
He comenzado esta tarde con mi investigación sobre el tema. Para los que tratéis de intentarlo si fuera el caso no sabéis como yo como conseguirla, ahora mismo he probado varias cosas, sin entrar en tema VB o C# de Net. Debido claro está a que nunca me he topado con esto y pese a que he buscado en Google y no he encontrado nada al respecto puesto que no se por donde tirar en la búsqueda.

De modo que me he centrado en intentar averiguar como se crea la tabla. Para ello he descargado la página íntegra (obvio no todo el contenido que se pueda encontrar en el servidor, como PHPs) desde el navegador usando "Guardar como...".  También online he visualizado el código fuente y lo he copiado y he creado con un un HTML.

Tanto con el código obtenido online como el obtenido con "Guardar como" no cargan la tabla. La diferencia de ambos es que el segundo trata de obtener los archivos desde el directorio desde donde se ejecuta el HTML, y el primero debería hacerlo buscando en el servidor. Sin embargo ninguno de los dos carga la tabla.

Lo que voy a hacer ahora es trabajar desde Chrome o Firefox usando el modo desarrollador del navagador. Modificando el código y tratar de averiguar que partes de la página intervienen en el desarrollo de la tabla.

Saludos

[Eleкtro]

Si depuras con el inspeccionador de elementos puedes averiguar la query a la API que están usando para generar el contenido de dicha tabla (mediante la respuesta obtenida en formato JSON)...

• https://api.unidadeditorial.es/sports/v1/classifications/current/?site=2&type=10&tournament=0101

Tan solo tienes que descargar la respuesta como una cadena de texto (recordemos que estará en formato JSON), y parsear la cadena como prefieras. Puedes usar la librería de terceros JSON.NET para parsearlo, o bien puedes usar las funcionalidades built-in de .NET Framework para deserializar el documento JSON a modo de diccionario, o también a modo de XML... de lo cual te muestro un ejemplo a continuación:

Código (vbnet) [Seleccionar] Expandir

Dim uri As New Uri("https://api.unidadeditorial.es/sports/v1/classifications/current/?site=2&type=10&tournament=0101")

Using wc As New WebClient With {.Encoding = Encoding.UTF8}
   Dim jsonData As Byte() = wc.DownloadData(uri)

   Using jsonReader As XmlDictionaryReader =
       JsonReaderWriterFactory.CreateJsonReader(jsonData, 0, jsonData.Length, wc.Encoding,
                                                New XmlDictionaryReaderQuotas(), Nothing)

       Dim xml As XElement = XElement.Load(jsonReader)
       Dim ranks As IEnumerable(Of XElement) = xml.<data>.<item>.<rank>.<item>

       For Each rank As XElement In ranks
           Console.WriteLine("Nombre de equipo: {0}", rank.<name>.Value)
           Console.WriteLine("Puntos Totales..: {0}", rank.<standing>.<points>.Value)
           Console.WriteLine("Puntos (En Casa): {0}", rank.<standing>.<home>.<points>.Value)
           Console.WriteLine("Puntos (Fuera)..: {0}", rank.<standing>.<away>.<points>.Value)
           Console.WriteLine("")
       Next rank

   End Using

End Using

Código [Seleccionar] Expandir

Nombre de equipo: Barcelona
Puntos Totales..: 46
Puntos (En Casa): 26
Puntos (Fuera)..: 20

Nombre de equipo: Atlético
Puntos Totales..: 41
Puntos (En Casa): 26
Puntos (Fuera)..: 15

Nombre de equipo: Real Madrid
Puntos Totales..: 36
Puntos (En Casa): 22
Puntos (Fuera)..: 14

...

Saludos.

[okik]

Si depuras con el inspeccionador de elementos puedes averiguar la query a la API que están usando para generar el contenido de dicha tabla (mediante la respuesta obtenida en formato JSON)...

• https://api.unidadeditorial.es/sports/v1/classifications/current/?site=2&type=10&tournament=0101

Tan solo tienes que descargar la respuesta como una cadena de texto (recordemos que estará en formato JSON), y parsear la cadena como prefieras. Puedes usar la librería de terceros JSON.NET para parsearlo, o bien puedes usar las funcionalidades built-in de .NET Framework para deserializar el documento JSON a modo de diccionario, o también a modo de XML... de lo cual te muestro un ejemplo a continuación:

Código (vbnet) [Seleccionar] Expandir

Dim uri As New Uri("https://api.unidadeditorial.es/sports/v1/classifications/current/?site=2&type=10&tournament=0101")

Using wc As New WebClient With {.Encoding = Encoding.UTF8}
   Dim jsonData As Byte() = wc.DownloadData(uri)

   Using jsonReader As XmlDictionaryReader =
       JsonReaderWriterFactory.CreateJsonReader(jsonData, 0, jsonData.Length, wc.Encoding,
                                                New XmlDictionaryReaderQuotas(), Nothing)

       Dim xml As XElement = XElement.Load(jsonReader)
       Dim ranks As IEnumerable(Of XElement) = xml.<data>.<item>.<rank>.<item>

       For Each rank As XElement In ranks
           Console.WriteLine("Nombre de equipo: {0}", rank.<name>.Value)
           Console.WriteLine("Puntos Totales..: {0}", rank.<standing>.<points>.Value)
           Console.WriteLine("Puntos (En Casa): {0}", rank.<standing>.<home>.<points>.Value)
           Console.WriteLine("Puntos (Fuera)..: {0}", rank.<standing>.<away>.<points>.Value)
           Console.WriteLine("")
       Next rank

   End Using

End Using

Saludos.

joder siempre te me adelantas justo ahora lo iba a postear 

Gracias Elektro