Leer datos de un REST API con VUE

En este post realizaremos un proyecto en VUE que se conectara a un REST API  y utilizara un servicio del mismo para obtener un JSON de respuesta, este luego sera mostrado en pantalla utilizando HTML.

Necesitamos:

• Visual Studio Code
• Conocimientos en JSON, HTML y VUE
• JQuery
• REST API de prueba

Nivel: Intermedio

El API

El API que utilizaremos para el ejemplo se encuentra en http://dummy.restapiexample.com/. Esta web contiene un API REST falso o fake el cual nos sirve para probar en linea nuestra aplicación.

El servicio que utilizaremos se encuentra en la dirección «http://dummy.restapiexample.com/api/v1/employees», utiliza el método GET y el JSON que retorna es de la forma:

{
"status": "success",
"data": [
	{
	"id": "1",
	"employee_name": "Tiger Nixon",
	"employee_salary": "320800",
	"employee_age": "61",
	"profile_image": ""
	},
	....
	]
}

El objeto JSON contiene un array DATA en el cual se encuentra la información de empleados.

El Proyecto en VUE para leer JSON de una URL

Paso 1. Proyecto Base

Nuestro proyecto se llama «vjson», el archivo App.vue es el siguiente:

Paso 2. JQuery

Instalamos JQuery con el comando:

npm install jquery --save

A continuación declaramos JQuery en App.vue

const $ = require('jquery');

Paso 3. Servicio GET

Como ya mencionamos más arriba, el servicio que utilizaremos se encuentra en la dirección «http://dummy.restapiexample.com/api/v1/employees», declaramos este en una variable llamado URL:

var URL = 'http://dummy.restapiexample.com/api/v1/employees';

Paso 4. Data

Requerimos un lugar donde almacenar el JSON, declaramos una variable de tipo Object con el nombre de empleados.

empleados:Object

Paso 5. Mounted y JSON

Finalmente utilizamos el método getJSON cuya respuesta sera asignada a nuestra variable empleados. También utilizamos el hook mounted el cual es parte del ciclo de vida de vue. Este en particular es invocado después de que se ha montado la instancia raiz.

mounted(){
    var self = this;
    $.getJSON(URL, function (json){
      self.empleados = json;
    } );
  }

Bien, nuestro <SCRIPT> completo a continuación:

Paso 6: Mostrar los datos

Para terminar hacemos uso de HTML para mostrar los datos formateados en pantalla. El código es el siguiente:

    <table border="1">
      <caption>Empleados</caption>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Salario</th>
        <th>Edad</th>
      </tr>
      <tr v-for="empleado in empleados.data" :key="empleado.id">
        <td>{{empleado.id}}</td>
        <td>{{empleado.employee_name}}</td>
        <td>{{empleado.employee_salary}}</td>
        <td>{{empleado.employee_age}}</td>
      </tr>
    </table>

Finalmente el código completo del archivo App.vue:

Ya solo nos queda ejecutar la aplicación y obtenemos:

enjoy!