primero que todo... ¿Estás completamente seguro de que recibes un JSON
y lo muestras por consola?
Recuerda que la sentencia require
hace parte de los modulos de nodejs
y no de javascript puro
, es decir que en javascript puro no existe.
De todas maneras hay algo que me parece extraño... y es esta parte de aqui:
let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
let request = new XMLHttpRequest();
Porque intentas requerir un modulo?, hay que entender algo, XMLHttpRequest
es nativo de javascript
, por lo cual no requieres de instalar ni requerir modulos externos para obtener un XMLHttpRequest
, mira este ejemplo sin usar require
:
const ajax = new XMLHttpRequest();
console.log(ajax);
Como vemos existe nativamente sin importar ningun modulo o instalar alguno, de todas maneras aunque intentaras usar la version del modulo XMLHttpRequest
que tienes, estas importandola en una parte erronea.
Los modulos e importaciones de recursos externos... NUNCA se importan después del inicio del documento.
Si intentas importarlos en una parte distinta definitivamente te va a dar errores. Por ejemplo:
MAL:
//Inicio del documento
//Inicio del codigo
function JSONRequest(){
//Mal uso de require, fallara.
let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
}
BIEN:
//Inicio del documento
let XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
//Inicio del codigo
function JSONRequest(){
...
}
Ahora bien, respecto a la pregunta original del como puedes mostrar esta data en tu elemento, primero hare la misma pregunta del inicio...
¿Estas seguro de que recibes un JSON como respuesta?
Existe un problema, un problema que no puedes resolver tu, ni yo ni ninguno de nosotros, y es que tienes problemas de origenes cruzados o como se le dice en ingles Cross-Origins.
Las CORS o cabeceras de origenes cruzados son una medida de seguridad tomada por los recursos de las paginas web las cuales le indican a la pagina aquellos usuarios o dominios los cuales podran acceder o no a los recursos, de esta manera se previene que cualquier persona intente acceder a un recurso no autorizado solamente haciendo uso de peticiones HTTP
.
Desactivar las CORS
es absurdamente sencillo, pero el inconveniente es no tener nosotros el acceso a ese archivo para añadir esa cabecera de acceso... en pocas palabras:
- Si no eres dueño del recurso y no añades esa cabecera (
Access-Control-Allow-Origin
) al archivo no vas a poder acceder a el de ninguna manera hagas lo que hagas.
Aun hay opciones... como buscar otras APIS
que tengan acceso publico (Access-Control-Allow-Origin: *
) o en caso de que seas el propietario de la API
, simplemente añadir esta cabecera en el documento del lado del servidor.
Pero por el momento, a no ser de que la API
te de acceso especial (por ejemplo una API KEY
que puedas enviar junto con la peticion), no hay manera de desactivar esas CORS
del lado del servidor.
El motivo de mi pregunta es porque, aunque yo pueda abrir directamente el archivo y ver el JSON
desde aquí:
enlace API
Esto no es lo mismo que tratar de obtener esta información en un sitio web diferente (petición HTTP
o XHTTP
hacia ese archivo).
La razon por la que todos podemos ver el JSON
si vamos directamente a ese link, es porque esa URL
se encuentra en el mismo dominio (hoisted by the same site
).
Mientras que nuestro sitio se encuentra obviamente en un dominio diferente (not hoisted by the same site
), asi que cuando intentamos obtener esta información en tu archivo dara problemas de origenes cruzados
, CORS
.
Soluciones posibles:
- Buscar otra
API
pero que tenga acceso publico.
- Si eres propietario de la
API
añadir esta cabecera para tu dominio o hacer de ese archivo un recurso publico.
He confirmado que se trata de CORS
, puesto que al intentar hacer fetch
en vez de XMLHttpRequest
también se obtiene el mismo problema (CORS
):
fetch("https://api.spigotmc.org/simple/0.1/index.php?action=getResource&id=78993")
.then(res =>{
res.json();
})
.then(r =>{
console.log(r);
})
.catch(e =>{
console.error(e);
})
Se que no se ve que sea explicitamente las CORS
, pero cuando intentamos esto desde otra cosa que no sea este snippet, aparece la parte del error de CORS
.
De todas maneras, aunque nosotros no podamos solucionar directamente este error de CORS
, he decidido organizar y corregir un poco tu codigo en lo posible, por si de algo te ayuda:
window.onload = ()=>{
function JSONRequest(){
let request = new XMLHttpRequest();
request.onload = () => {
let JSONFile = JSON.parse(request.responseText);
let downloads = JSONFile.stats.downloads;
document.getElementById("output").innerHTML = downloads;
}
request.onerror = e =>{
console.error(e);
}
request.open('GET', 'https://api.spigotmc.org/simple/0.1/index.php?action=getResource&id=78993');
request.send();
}
JSONRequest();
}
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<strong>Downloads: <span id="output"></span></strong>
</body>
</html>