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

Question

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

我使用 fetch() API 检索此列表。在浏览器中，它似乎与 HIBP 网站有连接，但预期的违规行为不可见。

我认为这是一个 JSON 问题，因为 API returns 结果没有根树 (?)（例如 [breaches:{"Name"... - 只有 {"Name"})，所以我认为我在 JS 文件的迭代步骤中犯了一个错误。另外，我没有正确调用 HTML 文件中的 'retrieve' 函数，因为浏览器抛出错误：'Uncaught ReferenceError: retrieve is not defined'，但这是一个附带问题（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

let breaches = retrieve.Name;

retrieve 不是具有 Name 属性.

的对象

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

你必须遍历它。

例如

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

breaches.map

…而且Name是字符串，所以不能映射。您只能映射一个数组（就像您在 retrieve 中的数组）。

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 数据？

Why did fetch() API failed to retrieve custom HIBP JSON data?

javascript

json

fetch-api