{
y un }
.
Estas propiedades y sus valores a menudo se denominan "pares clave-valor".
Sin embargo, los JSON transmitidos por las API se envían como bytes
, y su aplicación lo recibe como una string
. Estos se pueden convertir en objetos JavaScript, pero no son objetos JavaScript de forma predeterminada. El método JSON.parse
analiza la cadena y construye el objeto JavaScript descrito por él.
Puedes solicitar el JSON desde la API Cat Photo de freeCodeCamp. Aquí está el código que puede poner en su evento de clic para hacer esto:
req=new XMLHttpRequest();Aquí hay una reseña de lo que está haciendo cada pieza. El objeto
req.open("GET",'/json/cats.json',true);
req.send();
req.onload=function(){
json=JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
};
XMLHttpRequest
JavaScript tiene una serie de propiedades y métodos que se utilizan para transferir datos. Primero, se crea una instancia del objeto XMLHttpRequest
y se guarda en la variable req
.
A continuación, el método open
inicializa una solicitud: este ejemplo solicita datos de una API, por lo tanto es una solicitud "GET". El segundo argumento para open
es la URL de la API de la que solicita datos. El tercer argumento es un valor booleano donde true
convierte en una solicitud asíncrona.
El método de send
envía la solicitud. Finalmente, el controlador de eventos onload
analiza los datos devueltos y aplica el método JSON.stringify
para convertir el objeto JavaScript en una cadena. Esta cadena se inserta como el texto del mensaje.
XMLHttpRequest
.
testString: 'assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), "Your code should create a new XMLHttpRequest
.");'
- text: Su código debe usar el método open
para inicializar una solicitud "GET" a la API de foto freeCodeCamp Cat.
testString: 'assert(code.match(/\.open\(\s*?("|")GET\1\s*?,\s*?("|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g), "Your code should use the open
method to initialize a "GET" request to the freeCodeCamp Cat Photo API.");'
- text: El código debe utilizar el send
método para enviar la solicitud.
testString: 'assert(code.match(/\.send\(\s*\)/g), "Your code should use the send
method to send the request.");'
- text: Su código debe tener un controlador de eventos onload
configurado en una función.
testString: 'assert(code.match(/\.onload\s*=\s*function\(\s*?\)\s*?{/g), "Your code should have an onload
event handler set to a function.");'
- text: Su código debe usar el método JSON.parse
para analizar el responseText
.
testString: 'assert(code.match(/JSON\.parse\(.*\.responseText\)/g), "Your code should use the JSON.parse
method to parse the responseText
.");'
- text: Su código debe obtener el elemento con message
clase y cambiar su HTML interno a la cadena de datos JSON.
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g), "Your code should get the element with class message
and change its inner HTML to the string of JSON data.");'
```
```