Hola quiero renderizar en una lista los datos de un json de una api rest,por ejemplo quiero acceder a name.first, pero hasta el momento no me los muestra. No le encuentro el error a mi código, me podrían ayudar por favor.
Json de la api https://randomuser.me/api/?nat=DE&gender=male&results=2&
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="resultado"></div>
<script src="js/app.js"></script>
</body>
</html>
app.js
//1)Creamos el objeto XMLHTTPRequest
const xhr = new XMLHttpRequest();
// Abrimos la conexion
xhr.open("GET", url, true);
// Datos e impresion del template
xhr.onload = function () {
if (this.status === 200) {
let nombres = JSON.parse(this.responseText);
// console.log(nombres);
//Convierto el objeto JSON nombres en un array para poder recorrerlo.
let arrayNombres = Array.from(nombres);
let htmlNombres = "<h2>Nombres Generados</h2>";
htmlNombres += `<ul class="lista">`;
//Imprimir cada nombre
arrayNombres.forEach(function (nombre) {
htmlNombres += `
<li>${results[nombre].name.first}
`;
});
htmlNombres += "</ul>";
document.getElementById("resultado").innerHTML = htmlNombres;
}
};
//Enviar el Request
xhr.send();
}