Estoy usando la API de Star Wars (SWAPI) para un proyecto. Estoy en el proceso de aprender a buscar la API. Un problema que tengo es que tengo una sección para especies y cuando presiono el botón devuelve ciertos atributos para esa especie. Este es el código:

 function getSpecies() { let numberSpecies = Math.floor((Math.random()*37)+1) let apiUrl = 'https://swapi.dev/api/species/' + numberSpecies fetch(apiUrl) .then(function(response){ return response.json() }) .then (function(json){ console.log(json) let name = document.getElementById('species-name') let classification = document.getElementById('classification') let designation = document.getElementById('designation') let language = document.getElementById('language') let lifespan = document.getElementById('lifespan') name.innerText = `Species Name: ${json['name']}`; classification.innerText = `Classification: ${json['classification']}`; designation.innerText = `Designation: ${json['designation']}`; language.innerText = `Language: ${json['language']}`; lifespan.innerText = `Lifespan: ${json['average_lifespan']}-years`; }) }) }

Entonces, cuando presiono el botón, obtiene la información que quiero. Sin embargo, hay un atributo de datos en la sección de especies que está etiquetado como 'personas' y muestra las personas que pertenecen a esa especie. El atributo 'personas' es otro enlace dentro de SWAPI. En otras palabras, el atributo se compone de más URL que requieren el uso de fetch.

Mu problema es que quiero llamar a esas múltiples direcciones URL y devolver el 'nombre' de ellas y luego mostrarlo. Entonces, si la especie es 'Humana', tiene cuatro personas y, por lo tanto, 4 URL y quiero buscar todas esas URL y solo obtener el 'nombre' de cada 'Humano'. Esto es lo que he intentado (va directamente debajo de la última línea de código, es decir, debajo de lifespan.innertext):

 const peopleUrl = json.people peopleUrl.forEach(people = (data) => { fetch(data) .then(function(response){ return response.json() }) .then (function(json){ console.log(json) let inhabitants = document.getElementById('inhabitants') inhabitants.innerText = json.name }) })

Sin embargo, esto solo devuelve el nombre de la última persona en la matriz y no todos ellos. ¿Hay alguna forma de obtener todos los 'nombres'?