freeCodeCamp/curriculum/challenges/spanish/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.spanish.md

id	title	challengeType	videoUrl	localeTitle
587d7fae367417b2b2512be4	Access the JSON Data from an API	6		Accede a los datos JSON desde una API

Description

En el desafío anterior, viste cómo obtener datos JSON de la API de foto freeCodeCamp Cat. Ahora analizará con más detalle los datos devueltos para comprender mejor el formato JSON. Recordemos alguna notación en JavaScript:

[] -> Los corchetes representan una matriz
{} -> Los corchetes representan un objeto
"" -> Las comillas dobles representan una cadena. También se utilizan para nombres de clave en JSON

Comprender la estructura de los datos que devuelve una API es importante porque influye en cómo recuperar los valores que necesita. A la derecha, haga clic en el botón "Obtener mensaje" para cargar el JC API JC de FreeCodeCamp Campamp en el HTML. El primer y último carácter que ve en los datos JSON son corchetes [ ] . Esto significa que los datos devueltos son una matriz. El segundo carácter en los datos JSON es un rizo { corchete, que inicia un objeto. Mirando de cerca, puedes ver que hay tres objetos separados. Los datos JSON son una matriz de tres objetos, donde cada objeto contiene información sobre una foto de gato. Anteriormente aprendió que los objetos contienen "pares clave-valor" que están separados por comas. En el ejemplo de Cat Photo, el primer objeto tiene "id":0 donde "id" es una clave y 0 es su valor correspondiente. Del mismo modo, hay claves para "imageLink", "altText" y "codeNames". Cada objeto de foto de gato tiene estas mismas claves, pero con valores diferentes. Otro "par clave-valor" interesante en el primer objeto es "codeNames":["Juggernaut","Mrs. Wallace","ButterCup"] . Aquí "codeNames" es la clave y su valor es una matriz de tres cadenas. Es posible tener matrices de objetos, así como una clave con una matriz como valor. Recuerda cómo acceder a los datos en matrices y objetos. Las matrices utilizan la notación de corchetes para acceder a un índice específico de un elemento. Los objetos usan el soporte o la notación de puntos para acceder al valor de una propiedad determinada. Aquí hay un ejemplo que imprime el "altText" de la primera foto del gato; tenga en cuenta que los datos JSON analizados en el editor se guardan en una variable llamada json :

console.log (json [0] .altText);
// Imprime "Un gato blanco con un casco verde con forma de melón en la cabeza".

Instructions

Para el gato con el "id" de 2, imprima en la consola el segundo valor en la matriz codeNames . Debe usar el corchete y la notación de puntos en el objeto (que se guarda en la variable json ) para acceder al valor.

Tests

tests:
  - text: Su código debe usar el soporte y la notación de puntos para acceder al nombre del código correcto e imprimir "Loki" en la consola.
    testString: 'assert(code.match(/(?:json\[2\]\.codeNames\[1\]|json\[2\]\[("|")codeNames\1\]\[1\])/g), "Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.");'

Challenge Seed

<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      req=new XMLHttpRequest();
      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);
        // Add your code below this line


        // Add your code above this line
      };
    };
  });
</script>
<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Photo Finder</h1>
<p class="message box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Solution

// solution required