Question

我正在尝试使用Have I Been Pwned? API来检索给定电子邮件帐户的违规列表。

我使用fetch（）API检索此列表。在浏览器中，看起来好像与HIBP网站有连接，但是看不到预期的违规行为。

我认为这是JSON问题，因为API返回的结果没有根树（？）（例如[违反：{“ Name” ...-仅{“ Name”}），所以我认为在JS文件的迭代步骤中犯了一个错误。另外，由于浏览器抛出错误，我没有正确调用HTML文件中的“检索”功能：“未捕获的ReferenceError：未定义检索”，但这是附带问题（fetch（'https://haveibeenpwned.com/api/v2/breachedaccount/test@example.com '）也不起作用。

这是我使用JS，fetch（）和JSON的第一周，因此在问这个问题之前，我咨询了一些消息来源（但几天后我仍然无法弄清楚）：

实际问题在哪里？

index.html 文件：

<!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));
    });

Answer 1

String hello_world became helloWorld
String hello___world became helloWorld
String hel_lo_wo_rld__ became helLoWoRld
String __hello_world__ became HelloWorld

let breaches = retrieve.Name;不是具有retrieve属性的对象。

这是一个包含多个对象的数组，每个对象都有一个Name属性。

您必须遍历它。

例如

Name

retrieve.forEach( item => {
    let breaches = retrieve.Name;
    console.log(breaches);
});

…并且Name是一个字符串，因此您无法映射它。您只能映射一个数组（类似于breaches.map中的数组）。

Answer 2

我已经创建了可行的工作版本，并从结果中提取了Name字段。 https://jsfiddle.net/vhnzm1fu/1/请注意：

return retrieve.forEach(function(check) {
    let span = createNode('span');
    span.innerHTML = `${check.Name}<br/>`;
    append(results, span);
})

为什么fetch（）API无法检索自定义HIBP JSON数据？

2 个答案: