Está en la página 1de 18

https://www.youtube.com/watch?

v=lLsYjzpSDyA
API REST - JSON | Curso Practico Completo Rápido
Contamos con un validador de Json Online: https://jsonlint.com/
En consola:

Los datos los queremos ver en pantalla, pues actualmente se están viendo es en la Consola.
Normalmente la Interfaz consume datos de un Servidor Remoto, no específicamente de un archivo
propio de la aplicación, es decir, que si por ejemplo tengo una aplicación móvil con los datos
guardados en el propio móvil es porque los datos no son muy pesados o porque yo quiero una
funcionalidad nativa relacionada a los datos. Si tengo una Base de datos con miles de usuarios es
imposible que la pueda almacenar en mi celular a menos que este tenga mucha memoria, pero si
todas las personas quieren tener acceso a estos datos probablemente los coloquemos en un
servidor Remoto para que todos puedan tener acceso.
Y esto es lo que vamos a hacer, crear un Servidor normal. De la siguiente manera:
Vamos a la página: https://nodejs.org/en/
Y descargaremos nodejs. nodejs es la forma de crear un servidor con JavaScript

Una vez instalado nodejs vamos a la página: https://www.npmjs.com/package/live-server


Este es el Servidor que vamos a usar:
Enseguida vamos a nuestra Consola de Windows:

Luego Instalamos Live Server desde nuestra Consola:


Una vez terminado de instalar nos vamos a nuestro editor y generamos en nuestro index.html el
código para que la información se muestre en pantalla que es lo que queremos, pues actualmente
se esta viendo es en Consola.

Parte del código adicionado:


Lo guardamos y vamos a nuestro browser:

Vamos a colocar enseguida las listas de cada una de las personas:


La rutina que esta encerrada en el ciclo for:
salida += '<li>' + personas[i].nombre + ' es ' + personas[i].nickname;

se puede reemplazar por la siguiente rutina y la función es la misma:


salida += `<li>${personas[i].nombre} su nickname es ${personas[i].nickname}</li>`;
tengamos en cuenta el tipo de comilla sencilla que vamos a usar: (``) estas No (’’)
Ahora bien, todo este index.html va a pedir al Servidor mis datos, tengo que hacer la solicitud con
un Código, para esto vamos a la siguiente dirección para pedir el HTTP Request:

https://www.w3schools.com/xml/xml_http.asp

Este HTTP Request me pide a través de mi pagina web recursos a otro Servidor. Copiamos este
código y lo pegamos en mi index.html.
Aquí lo que hacemos es utilizar un Método llamado: XMLHttpRequest(), que lo que hace es
traerme los datos del Servidor y se lo asigno a la variable: xhttp , esta variable es para que reciba
un estado que es una respuesta del Servidor y si esta Respuesta es satisfactoria (4 & status ==
200) que haga algo. Esta respuesta la muestra a través de pantalla.

Ahora nos vamos para mi terminal Windows:


Y nos vamos para la dirección donde está mi proyecto:
cd desktop/bloque 01-2020/front-end/videos y tutoriales/tutorial json
Nos envía al Servidor:

A diferencia de los ejemplos anteriores lo estaba abriendo desde los protocolos de archivos, ya qui
en este caso hemos utilizado un Servidor.

Ahora vamos y continuamos con nuestro código index.htm, lo quiere en este caso mostrar por
pantalla. Ya lo mostramos por Servidor pero ahora lo quiero mostrar por pantalla.
Para esto reemplazamos la rutina:

Por la rutina:
var respuesta = xhttp.responseText;
A esta variable respuesta le asignamos lo que venga del Servidor esto (xhttp.responseText)
trae la respuesta desde el Servidor.
Al ir al Servidor y refrescar debe salir esto:

Sale un String, pero nosotros normalmente lo que queremos es usar Objeto, para esto
nuevamente nos adentramos a nuestro código HTML y cambiamos lo siguiente:

Una vez guardado y refrescando el Servidor debe salir esto:


Json en Java Script

JSON no solamente me permite tener varios Objetos , sino que yo pued tener Objetos dentro de
Objetos.

También podría gustarte