Я пытаюсь использовать API I Been Pwned? для получения списка нарушений для данной учетной записи электронной почты.
Я получаю этот список с помощью API fetch ().В браузере похоже, что есть соединение с веб-сайтом HIBP , но ожидаемые нарушения не видны.
Я думаю, что это проблема JSON, потому что API возвращает результаты без корневого дерева(?) (например, [breaches: {"Name" ... - только {"Name"}), поэтому я думаю, что я делаю ошибку на шаге итерации в файле JS.Кроме того, я неправильно вызываю функцию «извлечения» в файле HTML, поскольку браузер выдает ошибку: «Uncaught ReferenceError: извлечение не определено», но это побочная проблема (fetch ('https://haveibeenpwned.com/api/v2/breachedaccount/test@example.com') тоже не работает).
Это моя первая неделя работы с JS, fetch () и JSON, поэтому я проконсультировался с несколькими источниками, прежде чем задавать этот вопрос (но я до сих пор не могу понятьчерез пару дней):
- Как использовать API JavaScript Fetch для получения данных
- API извлечения
- Методы API для HaveIBeenPwnd.com (неофициальный)
Где находится настоящая проблема?
index.html file:
<!DOCTYPE html>
<html lang=en>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
</head>
<body id="top">
<header id="header">
<div class="content">
<h1 style="text-align: center">Put an email in this box</h1>
<input type="email" id="InputBox" value="" autocapitalize="off" spellcheck="false" />
<button type="submit" id="PwnedButton" onclick="retrieve">pwned?</button>
<ul id="results"></ul>
</div>
</header>
<script src="test.js"></script>
</body>
</html>
Файл test.js (я знаю, что JS - интерпретируемый язык - поэтому пустые символы влияют на скорость выполнения - но я сделал его более читабельным для этого примера):
function createNode(element) {
return document.createElement(element); // Create the type of element you pass in the parameters
}
function append(parent, el) {
return parent.appendChild(el); // Append the second parameter(element) to the first one
}
const account = document.getElementById('InputBox');
const PwnedButton = document.getElementById('PwnedButton');
const results = document.getElementById('results');
fetch('https://haveibeenpwned.com/api/v2/breachedaccount/' + account)
.then((resp) => resp.json()) // Transform the data into json
.then(function(retrieve) {
let breaches = retrieve.Name; // Get the results
return breaches.map(function(check) { // Map through the results and for each one run the code below
let span = createNode('span'); // Create the element we need (breach title)
span.innerHTML = `${breaches}`;
append(results, span);
})
})
.catch(function(error) {
console.log(JSON.stringify(error));
});