freeCodeCamp

6.2 KiB

Raw Blame History

id	title	challengeType	forumTopicId	localeTitle
587d7fae367417b2b2512be4	Access the JSON Data from an API	6	301499	Доступ к данным JSON из API

Description

В предыдущей задаче вы видели, как получить данные JSON от FreeCodeCamp Cat Photo API. Теперь вы более подробно рассмотрите возвращенные данные, чтобы лучше понять формат JSON. Вспомните некоторые обозначения в JavaScript:

[] -> Квадратные скобки представляют собой массив
{} -> Фигурные скобки представляют собой объект
"" -> Двойные кавычки представляют собой строку. Они также используются для ключевых имен в JSON

Понимание структуры данных, возвращаемых API, важно, поскольку оно влияет на то, как вы извлекаете нужные значения. Справа нажмите кнопку «Получить сообщение», чтобы загрузить JavaScript-код FreeCodeCamp Cat Photo API JSON в HTML. Первый и последний символы, которые вы видите в данных JSON, являются квадратными скобками [ ] . Это означает, что возвращаемые данные представляют собой массив. Второй символ в данных JSON - фигурная { скобка, которая начинает объект. Посмотрев внимательно, вы увидите, что есть три отдельных объекта. Данные JSON представляют собой массив из трех объектов, каждый из которых содержит информацию о фотографии кота. Вы узнали ранее, что объекты содержат пары «ключ-значение», разделенные запятыми. Например, в примере «Кошка» первый объект имеет "id":0 где «id» - это ключ, а 0 - его соответствующее значение. Аналогично, есть ключи для «imageLink», «altText» и «codeNames». У каждого объекта фотокамеры есть такие же клавиши, но с разными значениями. Еще одна интересная пара «ключ-значение» в первом объекте - "codeNames":["Juggernaut","Mrs. Wallace","ButterCup"] . Здесь «codeNames» - это ключ, а его значение представляет собой массив из трех строк. Возможно иметь массивы объектов, а также ключ с массивом в качестве значения. Помните, как обращаться к данным в массивах и объектах. Массивы используют скобку для доступа к определенному индексу элемента. Для доступа к значению данного свойства объекты используют либо скобку, либо точечную нотацию. Вот пример, который печатает «altText» первой фотографии кота - обратите внимание, что проанализированные данные JSON в редакторе сохраняются в переменной json :

console.log (JSON [0] .altText);
// Отображение «Белый кот в зеленой шляпе в форме дыни на голове».

Instructions

Для кошки с «id» равным 2, напечатайте на консоли второе значение в массиве codeNames. Чтобы получить доступ к значению, вы должны использовать скобки и точечную нотацию на объекте (который сохраняется в переменной json).

Tests

tests:
  - text: Ваш код должен использовать скобки и точечные обозначения для доступа к правильному имени кода, и напечатать "Loki" в консоль.
    testString: assert(code.match(/(?:json\[2\]\.codeNames\[1\]|json\[2\]\[('|")codeNames\1\]\[1\])/g));

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">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Solution

// solution required

6.2 KiB Raw Blame History Unescape Escape