html - 在 HTML 中显示来自 FETCH 的 JSON 数据
问题描述
我需要从数组 (0, 1) 中的每个页面中获取 (html) 部分，我将如何执行此操作？API 调用工作得很好，只需要获取主要的 html 数据并将其显示在占位符 {welcome.text} 和 {about.text} 所在的网页上。
谢谢你的帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CMS Test</title>
</head>
<body>
<header>
<h1>CMS Test</h1>
<nav>
<a href="#Home">Home</a>
<a href="#About">About</a>
<a href="#Posts">Posts</a>
<a href="#Contact">Contact</a>
</nav>
</header>
<section id="Home">
<div class="container">
<h2>Welcome to website</h2>
{welcome.text}
</div>
</section>
<section id="About">
<div class="container">
<h2>About Section</h2>
{about.text}
</div>
</section>
<section id="Posts">
<div class="container">
<h2>Posts Section</h2>
{posts.list}
</div>
</section>
<section id="Contact">
<div class="container">
<h2>Contact Section</h2>
<p>contact on: email@provider.com</p>
</div>
</section>
<script>
fetch('http://68.183.219.114/ghost/api/v3/content/pages/?key=276f4fc58131dfcf7a268514e5')
.then(response => response.json())
.then(data => console.log(data));
</script>
</body>
</html>
从该 URL 获取后的 JSON 响应。
{
"pages": [
{
"id": "5efb6bbeeab44526aecc0abb",
"uuid": "38b78123-e5a8-4346-8f6e-6f57a1a284d0",
"title": "About Section",
"slug": "about-section",
"html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
"comment_id": "5efb6bbeeab44526aecc0abb",
"feature_image": null,
"featured": false,
"visibility": "public",
"created_at": "2020-06-30T16:43:42.000+00:00",
"updated_at": "2020-06-30T16:58:53.000+00:00",
"published_at": "2020-06-30T16:58:37.000+00:00",
"custom_excerpt": null,
"codeinjection_head": null,
"codeinjection_foot": null,
"custom_template": null,
"canonical_url": null,
"url": "http://68.183.219.114/about-section/",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\nincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\nnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\nfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\nculpa qui officia deserunt mollit anim id est laborum.",
"reading_time": 0,
"page": true,
"og_image": null,
"og_title": null,
"og_description": null,
"twitter_image": null,
"twitter_title": null,
"twitter_description": null,
"meta_title": null,
"meta_description": null
},
{
"id": "5efb6f53eab44526aecc0ac4",
"uuid": "26463d5f-011e-46b3-a1e2-60e213e33f6f",
"title": "Welcome",
"slug": "welcome",
"html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
"comment_id": "5efb6f53eab44526aecc0ac4",
"feature_image": null,
"featured": false,
"visibility": "public",
"created_at": "2020-06-30T16:58:59.000+00:00",
"updated_at": "2020-06-30T16:59:02.000+00:00",
"published_at": "2020-06-30T16:59:02.000+00:00",
"custom_excerpt": null,
"codeinjection_head": null,
"codeinjection_foot": null,
"custom_template": null,
"canonical_url": null,
"url": "http://68.183.219.114/welcome/",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\nincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\nnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\nfugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\nculpa qui officia deserunt mollit anim id est laborum.",
"reading_time": 0,
"page": true,
"og_image": null,
"og_title": null,
"og_description": null,
"twitter_image": null,
"twitter_title": null,
"twitter_description": null,
"meta_title": null,
"meta_description": null
}
],
"meta": {
"pagination": {
"page": 1,
"limit": 15,
"pages": 1,
"total": 2,
"next": null,
"prev": null
}
}
}
解决方案
用 span 或 container 标签元素更改 {[identifier]} 并为其分配一个唯一的 id（在示例中我使用的是 span 标签）。
加载 DOM 时，为每个由 id 标识的容器标签创建一个变量（或查询选择器，您有很多可能性）。
当获取操作成功时（我正在使用测试 REST 端点），提取数据并使用获取的数据“填充”容器标签（之前分配的）。
这是一个工作示例：
// FAKE DATA
const FAKE_DATA = JSON.parse(`{"pages":[{"id":"5efb6bbeeab44526aecc0abb","uuid":"38b78123-e5a8-4346-8f6e-6f57a1a284d0","title":"About Section","slug":"about-section","html":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>","comment_id":"5efb6bbeeab44526aecc0abb","feature_image":null,"featured":false,"visibility":"public","created_at":"2020-06-30T16:43:42.000+00:00","updated_at":"2020-06-30T16:58:53.000+00:00","published_at":"2020-06-30T16:58:37.000+00:00","custom_excerpt":null,"codeinjection_head":null,"custom_template":null,"canonical_url":null,"url":"http://68.183.219.114/about-section/","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.","reading_time":0,"page":true,"og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null},{"id":"5efb6f53eab44526aecc0ac4","uuid":"26463d5f-011e-46b3-a1e2-60e213e33f6f","title":"Welcome","slug":"welcome","html":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>","comment_id":"5efb6f53eab44526aecc0ac4","feature_image":null,"featured":false,"visibility":"public","created_at":"2020-06-30T16:58:59.000+00:00","updated_at":"2020-06-30T16:59:02.000+00:00","published_at":"2020-06-30T16:59:02.000+00:00","custom_excerpt":null,"codeinjection_head":null,"custom_template":null,"canonical_url":null,"url":"http://68.183.219.114/welcome/","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.","reading_time":0,"page":true,"og_image":null,"og_title":null,"og_description":null,"twitter_image":null,"twitter_title":null,"twitter_description":null,"meta_title":null,"meta_description":null}],"meta":{"pagination":{"page":1,"limit":15,"pages":1,"total":2,"next":null,"prev":null}}}`);
// Fetch url, change with http://68.183.219.114/ghost/api/v3/content/pages/?key=276f4fc58131dfcf7a268514e5
const FETCH_URL = "https://reqres.in/api/users?page=2";
// Data page index 1
const PAGE_1_INDEX = 0;
// Data page index 2
const PAGE_2_INDEX = 1;
window.addEventListener('DOMContentLoaded', (event) => {
const txtWelcome = document.getElementById("txtWelcome");
const txtAbout = document.getElementById("txtAbout");
const listPost = document.getElementById("listPost");
fetch(FETCH_URL)
.then(response => response.json())
.then(data => {
// Assign page 1
const page1 = FAKE_DATA.pages[PAGE_1_INDEX];
// Assign page 2
const page2 = FAKE_DATA.pages[PAGE_2_INDEX];
// START populating for example with page 2
txtWelcome.innerHTML = page2.title; // Example
txtAbout.innerHTML = page2.slug; // Example
listPost.innerHTML = page2.html; // Here you can add the HTML as above
// END Populating
});
});p:first-child {
font-weight: bold;
font-size: 2em;
text-decoration: underline;
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CMS Test</title>
</head>
<body>
<header>
<h1>CMS Test</h1>
<nav>
<a href="#Home">Home</a>
<a href="#About">About</a>
<a href="#Posts">Posts</a>
<a href="#Contact">Contact</a>
</nav>
</header>
<section id="Home">
<div class="container">
<h2>Welcome to website</h2>
<span id="txtWelcome">Loading...</span>
</div>
</section>
<section id="About">
<div class="container">
<h2>About Section</h2>
<span id="txtAbout">Loading...</span>
</div>
</section>
<section id="Posts">
<div class="container">
<h2>Posts Section</h2>
<span id="listPost">Loading...</span>
</div>
</section>
<section id="Contact">
<div class="container">
<h2>Contact Section</h2>
<p>contact on: email@provider.com</p>
</div>
</section>
</body>
</html>希望能帮助到你 ：）
推荐阅读
- python - \x00 在 .txt 文件的开头
- arrays - 在数组中查找最大元素 - 程序无法识别最后一个元素
- javascript - 如果在谷歌地图的搜索框中复制粘贴地址，位置不会改变
- biztalk - 设置段的默认值
- django - 如何在 django 中使用 only() 方法
- sql - aws athena SQL 查询；为每个唯一的 column1 获取 column2 的唯一计数
- android - 无法实例化片段 com.nisarg.locsav.PhotoGallery：找不到片段构造函数
- javascript - 如何覆盖Angular中的依赖项
- php - 如何返回 POST 值并在网站上打印？（wordpress）
- sql - 用 SELECT * FROM X WHERE Y is not NULL 替换查询