将 JSON 树导航到来自 Reddit API 的数据

Question

我会尽量保持简短。 我是一名在校学生，一直在尝试从 Reddit 的首页检索前 5 篇帖子，并在 HTML 页面上显示标题和 URL。 这可能是非常简单的事情，但我无法让它发挥作用。 我想将数据从单个变量传递到我的 Handlebars 模板。 我不断收到未处理的承诺警告。 这是我的代码。

let url = 'https://www.reddit.com/.json?limit=5';
let settings = { method: "Get"};
let redditData = ""
fetch(url, settings)
    .then(res => res.json())
    .then(data => {
        redditData = [
    {
    title: data.children.data.title,
    url: data.children.data.url_overriden_by_dest
    }
    ];
});

Answer 1

data对象的结构与您对其进行编码的方式不同。 以下是如何从第一个孩子中提取您想要的信息：

let url = 'https://www.reddit.com/.json?limit=5';
let settings = { method: "Get"};
let redditData = ""
fetch(url, settings)
    .then(res => res.json())
    .then(data => {
        redditData = [
    {
    title: data.data.children[0].data.title,
    url: data.data.children[0].data.url_overriden_by_dest
    }
    ];
});

Answer 2

您可能想在此处查看有关fetch函数如何工作的一些文档。

另外，请在此处检查 Promise 的工作方式。

话虽如此，您必须访问对象属性，只有当 Promise 完成检索数据时。 一种方法是使用Promise.allSettled函数。

请查看以下代码片段，其组织方式略有不同：

 const url = "https://www.reddit.com/.json?limit=5"; const promise = fetch(url).then(res => res.json()); function formatHandlebarsData(data) { const childrenObj = data.value.data.children; return childrenObj.map(element => ({ title: element.data.title, url: element.data.url })); } Promise.allSettled([promise]).then(([data]) => { const handlebarsData = formatHandlebarsData(data); // You can use the object now console.log(handlebarsData); });

Answer 3

惊人的。 我能够让它工作

let url = 'https://www.reddit.com/.json?limit=5';
let settings = { method: "Get"};
let redditData = ""
fetch(url, settings)
    .then(res => res.json())
    .then(data => {
        redditData = [
    {
    title: data.data.children[0].data.title,
    url: data.data.children[0].data.url_overriden_by_dest
    }
    ];
});

谢谢！