SUPERHERO API — Использование .forEach и .split
Первое испытание волшебника…
Давным-давно молодой волшебник получил свое первое задание от Богов Кода. Ему нужно было вызвать API, извлечь его сущность, подвигать его, как глину, в руках, а затем представить то, что он сделал, на одной веб-странице HTML. Ему нужен был способ хранения данных в контейнере, поэтому он начал так:
разрешить allSuperheroes = []
let url = (`https://cdn.jsdelivr.net/gh/akabab/superhero [email protected]/api/all.json`)
Первое заклинание создало сосуд для хранения данных API, а затем определило URL как способ хранения адреса API.
Другие волшебники поблизости колдули заклинания, но он их игнорировал, пришло его время говорить. Составив контейнеры и определив термины, он произнес одно заклинание. У первого заклинания было имя.
Его имя было FETCH:
выбрать(URL);
постоянные данные = await response.json();
всеСупергерои = […данные];
Другие волшебники наблюдали за ним, ожидая, когда он потерпит неудачу или преуспеет. Он имел скромность проверить свою работу с помощью другого заклинания, называемого console.log, а затем двумя взмахами пальца сделал ее прозрачной.
console.log(данные) =› //console.log(данные)
Он взял мощность из API, сохранил ее в контейнере, который назвал allSuperheroes, а затем повторил содержимое внутри с помощью ОПЕРАТОРА РАСПРОСТРАНЕНИЯ, который выглядел следующим образом: […данные]
{
"id": 569,
"name": "Rorschach",
"slug": "569-rorschach",
"powerstats": {
"intelligence": 75,
"strength": 10,
"speed": 29,
"durability": 20,
"power": 23,
"combat": 80
},
"appearance": {
"gender": "Male",
"race": "Human",
"height": [
"5'6",
"168 cm"
],
"weight": [
"140 lb",
"63 kg"
],
"eyeColor": "Blue",
"hairColor": "Red"
},
"biography": {
"fullName": "Walter Joseph Kovacs",
"alterEgos": "No alter egos found.",
"aliases": [
"-"
],
"placeOfBirth": "-",
"firstAppearance": "Watchmen #1 (September, 1986)",
"publisher": "DC Comics",
"alignment": "good"
},
"work": {
"occupation": "Vigilante, former garment worker",
"base": "-"
},
"connections": {
"groupAffiliation": "Crimebusters",
"relatives": "-"
},
"images": {
"xs": "https://cdn.jsdelivr.net/gh/akabab/[email protected]/api/images/xs/569-rorschach.jpg",
"sm": "https://cdn.jsdelivr.net/gh/akabab/[email protected]/api/images/sm/569-rorschach.jpg",
"md": "https://cdn.jsdelivr.net/gh/akabab/[email protected]/api/images/md/569-rorschach.jpg",
"lg": "https://cdn.jsdelivr.net/gh/akabab/[email protected]/api/images/lg/569-rorschach.jpg"
}
},
Это было лишь одно из имён, сил, изображений и легенд, которые влились в его вместилище всех супергероев.
Но он держал в руке всех супергероев, и она светилась, как одна песчинка.
Знания могут быть прекрасной вещью, подумал он, но они мало что значат без направления, курса, которому нужно следовать. Самый легкий ветерок никогда не ощущается, если он дует не в ту сторону, поэтому он наложил «оповещение», чтобы сообщить любому, кто использовал его HTML-страницу, следующий шаг:
alert('Теперь наведите указатель мыши на РОДСТВЕННИКОВ и увидите список их семьи!');
Затем его заклинание querySelector извлекло нужные ему части, и они были возвращены богам с помощью innerHTML, и все, что было, было переопределено.
form.addEventListener («отправить», функция (событие) {
событие.preventDefault();
const input = document.querySelector('input#search');
console.log(ввод.значение);
const response = await fetch(`https://www.superheroapi.com/api.php/1216454192525968/search/${input.value}`);
const data_1 = ожидание ответа.json();
//console.log(data_1);
Он знал, что некоторые слова, которые он извлекал из API, звучали как длинное дыхание, смешанное вместе, и превращались в ерунду, поэтому он использовал «split», чтобы слова произносились медленнее.
IT BEGAN THUS: "Thomas Zebulon Guthrie (father,deceased),Lucinda Guthrie (mother),Samuel Zachery Guthrie (brother,Cannonball),Joshua 'Jay' Guthrie (brother,Icarus),Joella Guthrie (sister),Elizabeth Guthrie (sister),Melody Guthrie (sister),Jeb Guthrie (brother),Lewis Guth"
пусть relativesArray = data_1.results[0].connections.relatives.split(“, “)
THEN IT WAS SO: "Thomas Zebulon Guthrie (father, deceased), Lucinda Guthrie (mother), Samuel Zachery Guthrie (brother, Cannonball), Joshua 'Jay' Guthrie (brother, Icarus), Joella Guthrie (sister), Elizabeth Guthrie (sister), Melody Guthrie (sister), Jeb Guthrie (brother), Lewis Guth"
Но, прежде чем он был сделан, была еще одна задача. Волшебнику нужно было по-другому слушать, ему нужно было доказать, что он умен, поэтому он наложил «наведение мыши» и использовал жесткий язык логических выражений, чтобы его заклинание сработало только один раз и чтобы оно было правдой…. {один раз: правда}
УНИКАЛЬНЫЙ СЛУШАТЕЛЬ СОБЫТИЙ №1
родственники.addEventListener('mouseover', () =› {
родственникиArray.forEach( r =› {
const famGraph = document.createElement("p")
famGraph.innerText = г
родственники.append(famGraph)})},
{один раз: правда});
Чтобы быть уверенным, что его заклинание защищено, он вложил
‹тип ввода=”кнопка” значение=”Обновить страницу” onClick=”document.location.reload(true)”›
в последней части своего HTML-кода, чтобы боги могли снова и снова использовать его творение.
УНИКАЛЬНЫЙ СЛУШАТЕЛЬ СОБЫТИЙ №2
УНИКАЛЬНЫЙ СЛУШАТЕЛЬ СОБЫТИЙ №3
Затем он вызвал init(), и все было готово. Основные заклинания, все вместе. Но они все равно работали.
Он улыбнулся, его лицо выражало вопрос. Боги пожали плечами и дали ему в руки волшебника очередную книгу заклинаний под названием Фаза-2. Он открыл книгу и заглянул внутрь…
(НИЖЕ приведена более «ТРАДИЦИОННАЯ» версия этой статьи.)
(Я сделал проект, который обращался к API супергероев, и мне нужно было иметь 3 прослушивателя событий и хотя бы один пример итерации массива.)
//*****УНИКАЛЬНЫЙ СЛУШАТЕЛЬ СОБЫТИЙ #1
window.addEventListener('DOMContentLoaded', async () =› {
console.log('Здравствуйте и добро пожаловать в код первой фазы проекта Flatiron School!');
(Я использовал DOMContentLoaded, потому что я извлекал данные и перемещал их, и меня беспокоило то, что они будут загружаться асинхронно, и это приведет к тому, что программа не будет работать. DOMContentLoaded позволил мне быть уверенным, что структура веб-страницы загрузится, пока я выполнял остальные .)
//*******УНИКАЛЬНЫЙ СЛУШАТЕЛЬ СОБЫТИЙ #2
form.addEventListener («отправить», асинхронная функция (событие) {
событие.preventDefault();
const input = document.querySelector('input#search');
const response = await fetch(`https://www.superheroapi.com/api.php/1216454192525968/search/${input.value}`);
const data_1 = ожидание ответа.json();
(В API супергероя была функция поиска, которую я смог реализовать с помощью кнопки поиска. Команда querySelector сказала программе обратить внимание на ввод и передать его в функцию выборки.)
(Я хотел убедиться, что все говорит само за себя, поэтому я встроил предупреждение с помощью этого прослушивателя событий:
alert('Теперь наведите указатель мыши на РОДСТВЕННИКОВ и увидите список их семьи!');
(Я смог заполнить страницу данными из массива, используя внутреннюю структуру массива, и попросил программу, которую я написал, выбрать запрошенные элементы)
document.querySelector(‘.name’).textContent = data_1.results[0].name;
document.querySelector(‘.biography’).innerHTML = `
<li>
‹span›‹STRONG›ПОЛНОЕ ИМЯ:‹/STRONG›‹/span›
‹span›${data_1.results[0].biography[‘полное имя’]}‹/span›
</li>
<li>
‹span›‹СИЛЬНОЕ›АЛЬТЕР-ЭГО:‹/СИЛЬНОЕ›‹/span›-
‹span›${data_1.results[0].biography[‘альтер-эго’]}‹/span›
</li>
<li>
‹span›‹STRONG›Псевдонимы:‹/STRONG›‹/span›
‹span›${data_1.results[0].biography[‘псевдонимы’]}‹/span›
</li>
<li>
‹span›‹СИЛЬНЫЙ›МЕСТО РОЖДЕНИЯ:‹/СИЛЬНЫЙ›‹/span›
‹span›${data_1.results[0].biography[‘место рождения’]}‹/span›
</li>
<li>
‹span›‹СИЛЬНЫЙ›ПЕРВОЕ ПОЯВЛЕНИЕ:‹/СИЛЬНЫЙ›‹/span›
‹span›${data_1.results[0].biography[‘первое появление’]}‹/span›
</li>
<li>
‹span›‹СИЛЬНЫЙ›ИЗДАТЕЛЬ:‹/STRONG›‹/span›
‹span›${data_1.results[0].biography[‘издатель’]}‹/span›
</li>
`;
(Данные местами были сжаты, поэтому я использовал функцию .split, которая делала все менее перегруженным:
Original: "Thomas Zebulon Guthrie (father,deceased),Lucinda Guthrie (mother),Samuel Zachery Guthrie (brother,Cannonball),Joshua 'Jay' Guthrie (brother,Icarus),Joella Guthrie (sister),Elizabeth Guthrie (sister),Melody Guthrie (sister),Jeb Guthrie (brother),Lewis Guth"
пусть relativesArray = data_1.results[0].connections.relatives.split(“, “)
After .split "Thomas Zebulon Guthrie (father, deceased), Lucinda Guthrie (mother), Samuel Zachery Guthrie (brother, Cannonball), Joshua 'Jay' Guthrie (brother, Icarus), Joella Guthrie (sister), Elizabeth Guthrie (sister), Melody Guthrie (sister), Jeb Guthrie (brother), Lewis Guth"
//*****УНИКАЛЬНЫЙ СЛУШАТЕЛЬ СОБЫТИЙ #3
(Я использовал «mouseover» в качестве моего последнего прослушивателя событий, но у меня была проблема с тем, что данные появлялись снова и снова, поэтому я добавил логическое значение, чтобы ответ срабатывал только один раз)
До:
После:
(Я также хотел иметь кнопку сброса, чтобы я мог легко перезагрузить страницу, поэтому я встроил ее в HTML-код :)
‹тип ввода=”кнопка” значение=”Обновить страницу” onClick=”document.location.reload(true)”›
//Итерация массива:
(для этого я использовал .forEach, чтобы взять каждого родственника и добавить его к «p» и каждый раз создавать новую строку для хранения объекта).
Вот и все. Надеюсь, вы чему-то научились и наслаждались поездкой!
