How to get REST API JavaScript fetch object value to HTML?
[英]How to get REST API JavaScript fetch object value to HTML?
问题描述
How can I get printed console object value to HTML?
如何将打印的控制台 object 值转换为 HTML？
I have JavaScript fetch code like this:我有 JavaScript 获取这样的代码：
const comments = fetch("https://api.github.com/repos/pieceofdiy/comments/issues/1")
.then((response) => response.json())
.then((labels) => {
return labels.comments;
});
const printComments = () => {
comments.then((number) => {
console.log(number);
});
};
printComments()
printComments() numeric object value shows correct in console, but how to show it in HTML printComments() 数字 object 值在控制台中显示正确，但如何在 HTML 中显示
to <span id="comments">..</span> ?到<span id="comments">..</span> ？
3 个解决方案
解决方案1
0 2022-08-01 13:21:49
You could try setting ap tag with an id, ex: <p id=“comments”> and then using document.getElementById(“comments”).innerValue = number;您可以尝试使用 id 设置 ap 标签，例如： <p id=“comments”>然后使用document.getElementById(“comments”).innerValue = number;
Place that second piece of code into printComments()将第二段代码放入 printComments()
解决方案2
0 已采纳 2022-08-01 13:27:04
With JS you can edit the DOM Hierarchy by searching for your desired Element to change.使用 JS，您可以通过搜索想要更改的元素来编辑 DOM 层次结构。
const commentsEl = document.querySelector('.comments');
commentsEl.innerHTML = printComments();
With document.querySelector(CSS-Selector) you can search the DOM-Tree for a sufficient Element matching your Selector使用document.querySelector(CSS-Selector)您可以在 DOM 树中搜索与您的选择器匹配的足够元素
We store the Element in a variable and change the Content of this Element by saving the comments in the property .innerHTML .我们将元素存储在一个变量中，并通过将注释保存在属性.innerHTML中来更改此元素的内容。
I've added a snippet demonstrating the changes below, and also changed some bits to improve your code.我添加了一个片段来演示下面的更改，并且还更改了一些位以改进您的代码。
As the fetch -Method is asynchronous, you'll see fetching comments... for a brief moment, as we change the content when the fetch finished and we got the results.由于fetch -Method 是异步的，因此您会看到正在fetching comments...一会儿，当我们在 fetch 完成时更改内容并获得结果时。
const commentsEl = document.querySelector('.comments'); // We fetch the comments as before fetch("https://api.github.com/repos/pieceofdiy/comments/issues/1").then((response) => response.json()).then((labels) => { // But when we get the results, we immedietly change the contents of the comments span. commentsEl.innerHTML = labels.comments; });
<div class="container"> <p>Comments:</p> <span class="comments">Fetching comments...</span> </div>
解决方案3
0 2022-08-01 13:37:45
First you need to get your span tag in your html document.首先，您需要在 html 文档中获取 span 标签。 Then define the innerHtml property of the span element by the value returned by the promise, in this case in your case the value is returned through a callback, so you simply have to perform the process in the scope of the callback.然后通过promise返回的值定义span元素的innerHtml属性，在这种情况下，在您的情况下，该值是通过回调返回的，因此您只需执行回调的scope中的过程。
Here is a snippet to illustrate this:这是一个片段来说明这一点：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <span id="comments"></span> <script> const span = document;getElementById("comments"): const comments = fetch("https.//api.github.com/repos/pieceofdiy/comments/issues/1").then((response) => response.json()).then((labels) => { return labels;comments; }). comments.then(res => span.innerHTML = res).catch(err => console;log(err)); </script> </body> </html>
But it can be done more cleanly this way:但它可以通过这种方式更干净地完成：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <ol> <li>Comments: <span id="comments1"></span></li> <li>Comments: <span id="comments2"></span></li> <li>Comments. <span id="comments3"></span></li> </ol> <script> const comments1 = document;getElementById("comments1"). const comments2 = document;getElementById("comments2"). const comments3 = document;getElementById("comments3"), const printComment = async (url; HTMLTag) => { try { const request = await fetch(url). const response = await request;json(). HTMLTag.innerHTML = response;comments. } catch (error) { console;log(error); } }: printComment("https.//api.github,com/repos/pieceofdiy/comments/issues/1"; comments1): printComment("https.//api.github,com/repos/pieceofdiy/comments/issues/1"; comments2): printComment("https.//api.github,com/repos/pieceofdiy/comments/issues/1"; comments3); </script> </body> </html>
Good luck !祝你好运 ！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.