Mostrando datos desde JSON en una tabla con JQuery o PHP y Rest API de Wordpress

Regresando a los experimentos después de pelear con algunos datos y mapas, una forma en la que podemos incluir información en nuestro sitio o script ya sea por una API o si tenemos varios sitios en distintos dominios podemos compartir información (incluso utilizando convirtiendo un array de php en un json para cuidar la integridad de la información).

[toc]

Primero ¿Qué es JavaScript Object Notation (JSON)?

Es un formato basado en texto estandarizado para representar datos estructurados en la sintaxis de objetos de JavaScript y generalmente se usa para compartir datos entre aplicaciones web Es comúnmente utilizado para transmitir datos en aplicaciones web.

Creando Json

Para poder leer un Json primero necesitamos uno y podemos escribirlo directamente con el riesgo de que el formato no funcione correctamente o crearlo con Javascript, PHP u otro lenguaje.

JSON es una cadena de caracteres y su formato es parecido al de los objetos literales JavaScript en el se pueden incluir cadenas, números, arreglos, booleanos, y otros de manera jerárquica por ejemplo:

{
  "pais": "MX",
  "capital": "CDMX",
  "datos": [
    {
      "alcaldia": "Milpa Alta",
      "servicios": [
        "Limpia",
        "Alumbrado",
        "Agua"
      ]
    }
  ]
}

Creando Json con Javascript

Javascript nos permite crear facilmente json a partir de un objeto por ejemplo:

//Creamos objeto y agregamos datos
var myObject = new Object();
myObject.alcaldia = "Milpa Alta";
myObject.servicios = ["Limpua", "Alumbrado","Agua"];
//Lo convertimos en una cadena Json y listo
var myString = JSON.stringify(myObject);
//Mostramos el resultado
document.write(myString);

Lo que nos dará el resultado siguiente:

Creando Json con PHP

Con php también es posible enviar arreglos a json utilizando la función json_encode() por ejemplo:

$objeto = [
    "alcaldia" => "Milpa Alta",
    "servicios" => ["Limpua", "Alumbrado","Agua"],
];
echo json_encode($objeto);

Y nos da el mismo resultado que el anterior con javascript

{"alcaldia":"Milpa Alta","servicios":["Limpua","Alumbrado","Agua"]}

Parseando Json y mostrándolo en una tabla

Tomando en cuenta el json generado anteriormente podemos pasearlo, anteriormente ya había hablado de como pasear json con php entonces no entraré mucho en el tema pero haré un ejemplo utilizando al REST API de wordpress

Un poco acerca de la REST API de WordPress

La API REST de WordPress proporciona una interfaz para que las aplicaciones interactúen con un sitio de WordPress enviando y recibiendo datos como objetos JSON, es la base del Editor de bloques de WordPress, y también puede habilitar el tema, complemento o aplicación personalizada para presentar interfaces nuevas y potentes para administrar y publicar el contenido del sitio.

Podemos accesar a ella entrando a /wp-json/wp/v2/ de casi cualquier sitio realizado en WordPress podemos a los endpoints y métodos para esto vamos a utilizar un ejemplo sencillo utilizando el endpoint de post dentro de la api que en el caso de este sitio se encuentra en:

https://algo.mx/wp-json/wp/v2/posts ahí podemos encontrar una respuesta json que nos muestra los últimos post del sitio, iniciemos con el ejemplo:

Mostrando los últimos post de un sitio WordPress con PHP utilizando REST API

Iniciemos con PHP, lo primero que tenemos que hacer es acceder al contenido de la REST API del sitio para ello utilizaremos la función file_get_contents(), posteriormente ese contenido lo pasearemos con json_decode() para convertirlo en un arreglo que podremos utilizar después y este es el código:

$json = file_get_contents("https://algo.mx/wp-json/wp/v2/posts");
$arreglo = json_decode($json,"false");
print_r($arreglo);

Ya con lo anterior tenemos un arreglo que podemos utilizar y meter en un foreach()que nos permite interactuar con el arreglo existente, para saber qué elementos tomaremos podemos ver el resultado mostrado con el código de arriba ahora vamos a juntar un poco de php con html para mostrar una tabla continuando el código de arriba solamente eliminando el print_r quedaría así:

$json = file_get_contents("https://algo.mx/wp-json/wp/v2/posts");
$arreglo = json_decode($json,"false");
print_r($arreglo);

echo "<table><thead><tr><td>Fecha</td><td>Título</td><td>Enlace</td></tr></thead><tbody>";
foreach($arreglo as $post){
    echo "<tr><td>".$post['date']."</td><td>".$post['title']['rendered']."</td><td>".$post['link']."</td></tr>";
}
echo "</tbody></table>";

Lo que al momento de hacer este post nos daría un resultado como el siguiente:

Fecha	Título	Enlace
2020-04-15T22:12:13	Fechas en Español con PHP	https://algo.mx/2020/04/15/fechas-en-espanol-con-php/
2020-04-13T12:28:44	Incluyendo código con PHP	https://algo.mx/2020/04/13/incluyendo-codigo-con-php/
2020-04-11T16:41:44	Consumiendo una API con PHP	https://algo.mx/2020/04/11/consumiendo-una-api-con-php/
2020-04-11T09:10:00	¿Qué es SSH?	https://algo.mx/2020/04/11/que-es-ssh/
2020-04-10T15:43:26	Cambiando de dominio a Algo.mx	https://algo.mx/2020/04/10/cambiando-de-dominio-a-algo-mx/
2020-04-09T18:52:06	Migrando WordPress de un servidor a otro con cambio de dominio	https://algo.mx/2020/04/09/migrando-wordpress-de-un-servidor-a-otro-con-cambio-de-dominio/

Mostrando los últimos post de un sitio WordPress con JQuery utilizando REST API

Otra opción para hacer lo anterior es utiilzar JQuery lo que nos permite ejecutar el código del lado del cliente para hacer algo parecido, entonces juguemos un poco:

<table>
<thead><tr><td>Fecha</td><td>Título</td><td>Enlace</td></tr></thead>
<tbody id="posts"></tbody>

  </table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script>
    var url = 'https://algo.mx/wp-json/wp/v2/posts';

$(document).ready(function () {
  var def = new jQuery.Deferred();
  $.ajax({
    url: url,
    jsonp: "cb",
    dataType: 'json',
    success: function (data) {
      console.log(data); //para saber si la llamada es correcta.
      $.each(data, function (index, item) {
        $('#posts').append('<tr><td>' + item.date + '</td><td>' + item.title.rendered + '</td><td>' + item.link + '</td></tr>'); //agregamos los elementos al tbody
      });           
    } 
  });  
}); 
</script>

Utilizando el código anterior podremos ver el siguiente resultado pero llamado desde el cliente y cada se agregue un nuevo post el resultado cambiará.

Fecha	Título	Enlace

Si tienen dudas pueden dejarlas en los comentarios y nos vemos en el siguiente post 😉

Mostrando datos desde JSON en una tabla con JQuery o PHP y Rest API de WordPress