En este ejemplo, nos conectamos a la API de Star Wars en https://swapi.dev/.
La API devuelve resultados en formato de array, luego, usando JavaScript, recorremos el array de resultados y mostramos el título o el nombre que se devuelve en los resultados de los datos JSON.
Películas
- [ ] Conectar
Buscar películas Una Nueva Esperanza
El Imperio Contraataca El Retorno del Jedi La Amenaza Fantasma El Ataque de los Clones La Venganza de los Sith
| Películas | app2.js:6 |
|---|---|
| | app2.js:23 |
- {count: 6, next: null, previous: null, results: Array(6)} 🟢 count: 6 next: null previous: null
- results: (6) [{…}, {…}, {…}, {…}]
- [[Prototype]]: Object
Código fuente del curso por Laurence Svekis https://basescripts.com/
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<select>
<option>films</option>
<option>people</option>
<option>planets</option>
</select>
<button>Conectar</button>
<div class="output"></div>
<script src="app2.js"></script>
</body>
</html>
```
```javascript
const selVal = document.querySelector('select');
const btn = document.querySelector('button');
const output = document.querySelector('.output');
const url = 'https://swapi.dev/api/';
btn.addEventListener('click', () => {
console.log(selVal.value);
btn.disabled = true;
output.innerHTML = 'Buscando...';
fetch(url + '/' + selVal.value)
.then(res => res.json())
.then(data => {
myOutput(data, selVal.value);
});
});
function myOutput(data, val) {
const total = data.results;
const itemName = val == 'films' ? 'title' : 'name';
btn.disabled = false;
output.innerHTML = `Buscar ${val}`;
console.log(data);
total.forEach(ele => {
output.innerHTML += `<div>${ele[itemName]}</div>`;
});
}
```
Código fuente del curso por Laurence Svekis https://basescripts.com/
Explicación del código:
1. HTML: Se crea una estructura básica con un menú desplegable (`<select>`) para elegir entre "films", "people" o "planets". También hay un botón para iniciar la búsqueda y un contenedor (`<div class="output">`) para mostrar los resultados.
2. JavaScript:
- Se seleccionan los elementos del DOM: el menú desplegable, el botón y el contenedor de salida.
- Se añade un evento de clic al botón que desencadena la solicitud a la API.
- Se utiliza `fetch` para hacer una solicitud a la API de Star Wars y se procesa la respuesta como JSON.
- La función `myOutput` recorre los resultados y los muestra en la página, dependiendo de si se seleccionaron "films", "people" o "planets".
Este código es funcional y permite conectarse a la API de Star Wars, obtener datos y mostrarlos en la página web.
Comments
Post a Comment