Cómo conectarse a una API JSON y mostrar los resultados en una página usando AJAX y JavaScript

Translator

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.