JavaScript para Cargar y Mostrar Libros en Web

Si el get no lo hace correctamente el navegador puede ser un error de cors https://www.w3.org/wiki/CORS_Enabled#What_is_CORS_about.3F.
Agregue estas líneas en el código del servidor.

header('Content-Type: application/json');
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
    header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

En la actualidad podemos usar API Fetch o realizar la solicitud con el Objeto XMLHttpRequest de JavaScript sin necesidad de importar una librería.

En Vue.js existía una iniciativa llamada vue request, pero decidieron hacer uso de [axios](https://github.com/axios/axios) ya que tenía una mejor implementación

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
  const el = document.querySelector('#loadBooks');
  el.addEventListener("click", function(){
    const url = 'http://localhost:8000/books';
    axios.get(url)
      .then(function (data) {
        // TODO addBook()
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  });
</script>

Angular maneja un HttpClient nativo del lenguaje para la solución de solicitudes http

Si no te cargan bien los datos, tranquilo. En la siguiente clase lo solucionan 👍

No entiendo porque en platzi se le da tanto hate al JQuery (que todos sabemos que no se usa) y se esta utilizando en un curso actualizado de API REST.

Team Platzi.
Muy bueno el curso, pero tienen que actualizarlo.

Estoy de acuerdo en que se puede usar vanilla JS, no se necesita más, actualmente Javascript ya trae muchas herramientas poderosas que lo hacen independiente de usar ciertas librerías, en ciertos casos, sin embargo jQuery es algo que ya es muy viejo, pero no esta de más entender otra tecnología que se usaba mucho, porque en el mundo laboral nos podemos topar con esta herramienta y dominarla nos dará ventaja, por ejemplo WordPress en algunas versiones aun usa jQuery de base

JQuerry es una librería antigua. Lo digo para que nadie se lance a aprender esta librería cuando ya existen muchas que la reemplazaron. No en si porque sean mejores sino porque en el tiempo que se creo JQuerry era muy complicado crear comandos para interactuar con el DOM. Sin embargo el JS que hoy conocemos nos permite hacerlo sin la necesidad de usar JQuerry y de una forma mas sencilla que en aquellos tiempos.
Hoy en día existen muchas otras librerias, tales como React.js, Vue.js, etc.

Consumir API con JavaScript vanilla

Puedes consumir APIs en JavaScript sin necesidad de usar JQuery, el cual se encuentra ya prácticamente obsoleto.
Para ello utilizamos la función nativa de fetch.

fetch('localhost:8000/books')
      // Se usa el .then() para obtener la respuesta
      // Puedes ver el estatus poniendo por ejemplo: 
      // console.log(response.status)
      .then(response => { 
	console.log(response.status)
	
	// Tenemos que retornar la respuesta con response.json() para solo ver los datos y no toda la respuesta (headers, status, etc)
        return response.json()
      })
      // Volvemos a poner .then() para usar el dato que retornamos anteriormente
      .then(data => console.log(data))

Esto también se puede hacer de forma asíncrona usando async y await dentro de una función:

async function llamarMiAPI() {
  const response = await fetch('localhost:8000/books');

  console.log(response.status);

  const data = await response.json();

  return data;
}

llamarMiAPI()

Un video cortico de fredy explicando que es AJAX
https://www.youtube.com/watch?v=_ybgWmSCAu8

<?php

$matches = $_GET = [];

// Excepcion para las  url principal sea index.html
if (in_array( $_SERVER["REQUEST_URI"], [ '/index.html', '/', '' ] )) {
    echo file_get_contents( 'ruta de\index.html' );
    die;
}

if (preg_match('/\/([^\/]+)\/([^\/]+)/', $_SERVER["REQUEST_URI"], $matches)) {
    $_GET['resource_type'] = $matches[1];
    $_GET['resource_id'] = $matches[2];
    
    require 'server.php';
} elseif ( preg_match('/\/([^\/]+)\/?/', $_SERVER["REQUEST_URI"], $matches) ) {
    $_GET['resource_type'] = $matches[1];
    
    require 'server.php';
} else {
    error_log('No matches');
    http_response_code( 404 );
}

Hola! al cargar los libros arroja undefined en todos los registros. No se solucionó agregando el dataType ¿alguna idea? gracias!!

Buenas tarde envio mis código de los cambio que me toco hacer para que funcionara. Es importante iniciar el servidor con route.php
index.html

<script type="text/javascript">
        //Se identifica el elemento por el id para que realice una funcion
        $('#loadBooks').click(function () {
            //Dentro de la funcion toma el parrafo con el id 'messages' para cargar el texto mientras realiza la consulta
            $('#messages').first('p').text('Cargando libros....');
            $('#messages').show();
            //Se ejecuta la llamada al servidor mediante el metodo Ajax. Recibe un objeto jSon de la configuracion de la conexion
            console.log('hola');
            $.ajax(

                {
                    'url' : '/books', 'dataType': 'json',
                    // Metodo que recibe la respuesta del servidor (HTTP_ERROR_CODE)
                    'success': function (data) {

                        //Desaparece el mensaje
                        $('#messages').hide();
                        //Vacia la tabla
                        $('#booksTable > tbody').empty();
                        //Recorrer el arreglo de los resultados obtenidos y agregar cada uno a la tabla
                        for (b in data) {
                            addBook(data[b]);
                        }
                        $('#bookForm').show();
                    }
                }
            );
        });
        // Funcion para agregar cada unos elementos a la fila de la tabla
        function addBook(book) {
            $('#booksTable tr:last').after('<tr><td>' + book.titulo + '</td><td>' + book.id_autor + '</td><td>' + book.id_genero + '</td></tr>');
        }
    </script>

route.php

<?php

$matches=[];
// Excepcion para las  url principal sea index.html
if (in_array( $_SERVER["REQUEST_URI"], [ '/index.html', '/', '' ] )) {
    echo file_get_contents( 'ruta_aqui_directorio/index.html' );
    die;
}

Yo lo hice asi

Esta es otra manera de hacer una llamada asincrona con JQuery.

            $.get('http://localhost:8000/books/')
            .done(response => {
                ...<Codigo>...
            });

Tome el curso solo para ver la comunicación con ajax y lo hacen con jquery… porqueeeee? solo me obliga a tomar otro curso de una librería vieja

Con jQuery también se puede usar simplemente el método $.get para obtener datos mediante get, pero siempre es mejor usar $.ajax para hacer una petición más completa

código añadido a index.html

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $('#loadBooks').click( function( ) {
        $('#messages').first('p').text('Cargando libros...');
        $('#messages').show();
        $.ajax( {
            'url': 'http://localhost:8000/books',
            'success' : function( data ) {
                $('#messages').hide();
                $('#booksTable > tbody').empty();
                for ( b in data ) {
                    addBook( data[b] );
                }
                $('#bookForm').show();
            }
        } );
    });

    function addBook( book )
    {
        $('#booksTable tr:last').after('<tr><td>' + book.titulo + '</td><td>' + book.id_autor + '</td><td>' + book.id_genero + '</td></tr>');
    }
    </script>

Ejemplo:

$.ajax({
	url: 'https://reqres.in/api/users',
	success: function(respuesta) {
		console.log(respuesta);
	},
	error: function() {
        console.log("No se ha podido obtener la información");
    }
});

Si tu tabla se llena de “undefined”, haz esto:

1. Inicializa el servidor con php -S localhost:8000 router.php . En el video pasado, el profesor lo inicializó sin “router.php” diciendo que no era necesario, pero en mi caso si me da un problema y eso me ayudó a resolverlo.
2. Al final de la siguiente clase, el profesor agrega un pedazo de código al archivo router.php para que localhost:8000 cargue tu archivo index.html

Toda la tabla al momento de dar cargar libros, me aparece como undefined… Ayuda!

Hola estoy intentando cargar los libros por medio de un input text y que a pulsar el boton cargar libros los busque en el localhost y solo me traiga los libros que coincidan con la palabra que este en el input pero no he podido dar on el caso, alguien sabria como podria hacerlo y que metodos deberia emplear correctamente.

Me parece muy buena explicación, consumir la API con AJAX

No me funciona, se me queda en cargando…

excelente…