Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Leer datos de un REST API con VUE

Leer datos de un REST API con VUE

Autor jc mouse jueves, agosto 6, 2020

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:

proyecto vue

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:

read json vue example

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:

servicio web rest con javascript vue ejemplo completo

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

respuesta json get empleados

enjoy!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Convierte tus dibujos web en Código HTML

Convierte tus dibujos web en Código HTML

Sketch2Code es un proyecto de Microsoft el cual usa IA (Inteligencia Artificial) para transformar el diseño de una inter...

Ejemplo de Pruebas Unitarias en Java

Ejemplo de Pruebas Unitarias en Java

Una Prueba Unitaria, es una forma de comprobar que nuestro código, hace lo que se supone debe hacer; es decir, se asegur...

Microsoft Bing laza un mapa interactivo para seguir el avance de la pandemia a nivel mundial

Microsoft Bing laza un mapa interactivo para seguir el avance de la pandemia a nivel mundial

El gigante de la tecnología Microsoft ha lanzado un mapa interactivo para proporcionar información sobre la propagación...

Botones circulares de Google Plus en java

Botones circulares de Google Plus en java

Continuación del tutorial «Google Circles en java» o.O 🙂 La Interfaz El proyecto consta de una sola interfaz la cual es...

Radio.Garden .:. La web donde puedes escuchar Radios de todo el mundo

Radio.Garden .:. La web donde puedes escuchar Radios de todo el mundo

Radio.Garden es un proyecto interactivo desarrollado por el Instituto Holandés para el Sonido y la Visión en cooperación...

Blog MVC – Iniciando el proyecto [p2]

Blog MVC – Iniciando el proyecto [p2]

Segunda parte del tutorial [Crea tu blog con el patrón MVC y php]. En esta 2da parte toca ver lo que es la creación del...

Comparte lo que sabes

Categorias

Últimas entradas

Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la...

TikTok es una plataforma de microvideos muy popular entre los jóvenes el cual cuenta ya con millones de videos cortps de...

Una clase JTree permite mostrar datos de una forma jerárquica y en realidad este objeto no contiene sus datos; es decir,...

Los archivos digitales (txt, docx, xlsx, odt, odp, pdf, etc) nos permiten almacenar información el cual en ocasiones, de...

Herramientas

Generador de Enlaces a Whatsapp