Итак, вы хотите использовать API, да?

Если вы читаете это, скорее всего, вы искали что-то вроде:

«Как мне использовать API?»

«Какую библиотеку я использую для API?»

«Что такое API?»

«Пожалуйста, помогите мне, я застрял на API приложения погоды freeCodeCamp и не знаю, что делаю».

Что ж, я собираюсь облегчить вам жизнь в 100 раз, потому что я был в той же точной лодке, что и вы.

Так что следуйте инструкциям, потому что, прочитав это, я обещаю вам, что вы поймете точно, что такое API и как с ним взаимодействовать.

Перво-наперво.

Нам нужно понять, что такое объект.

Я знаю, что вы видели нечто подобное.

Знакомо? Да, я знаю, наверное, это одна из первых вещей, которую вы узнали в своем путешествии по JavaScript.

Ладно, так о чем ты? При чем тут все?

Вы что-то замечаете в этом объекте? Вопрос не с подвохом.

Что вам говорит этот объект?

Эээ, это объект с именем person? У него есть ключи и значения… и что?

Хорошее начало.

Хорошо, о чем еще говорится? Что именно вам говорит этот объект?

Что он описывает?

Ой. Это объект под названием Person. У него есть имя Марио. Возраст 22 лет. Брат по имени Луиджи. И я думаю, еда - это грибы?

Теперь вы это понимаете!

Давайте двигаться вперед.

Как насчет этого?

Разве это не то же дерьмо?

Присмотрись.

Нет объявления? Как будто сейчас нет const Person =.

Тебе становится теплее…

У ключей есть кавычки?

Точно.

И ЧТО?

Что вам нужно понять, так это то, что первый фрагмент - это ваш обычный повседневный объект JavaScript, второй фрагмент очень похож, но называется JSON.

Самый важный ключевой момент - это знать, что обычно API, с которым вы будете работать, всегда будет выдавать JSON. Это ключ.

Я пытаюсь навязать вашему мозгу ментальную модель, согласно которой работать с API - это так же просто, как работать с объектом.

Итак, вернемся к первому фрагменту. Если бы я хотел получить имя этого человека, что бы мне написать?

Это просто. Я бы просто получил доступ к свойству name через точечную нотацию. Я мог бы просто сделать Person.name, и это дало бы мне "Mario".

А как насчет JSON?

Эм-м-м. Тоже самое…?

Почти. Дело в том, что это просто анонимный объект. Как бы мы использовали .name без чего-либо перед записью через точку?

Привет! Это был вопрос с подвохом. Это не честно!

Но ладно. Так как бы нам это присвоить?

Это просто.

Помните, что я сказал раньше? Как JSON обычно будет ответом от API?

Приведем практический пример. Давайте возьмем данные из API.

Вперед и поместите это в консоль своего веб-браузера.

Что ты видишь?

Это выглядит немного иначе. Но немного более знакомый, чем раньше. Это просто массив объектов.

А если бы мне нужно было имя первого объекта в массиве?

Легкий! Используйте [0], чтобы получить первый объект, затем используйте .name, чтобы получить имя!

Теперь вы это понимаете.

Хорошо. Но… как все это работает? Куда это назначено? Что делает этот код? Кажется, вы многое остановили. Я потерялся!

Я сделаю это настолько простым, насколько смогу. Вы можете не понимать этого полностью, но это скоро придет со временем.

Давайте взглянем на аннотированную версию этого фрагмента.

И вот так!

Теперь вы должны понимать основы того, как вызывать API, и уметь получать данные и что-то с ними делать.

В этом случае мы смогли вызвать API и теперь можем получить первый объект и console.log его имя.

Итак, вот проблема.

Я хочу, чтобы вы брали данные и вводили их в DOM.

Вот ваш стартовый код. Просто скопируйте и вставьте это в .html файл в вашем любимом текстовом редакторе и попробуйте заполнить пробелы.

Бонусные баллы, если вы используете другую конечную точку! Попробуйте использовать конечную точку /posts.