在 HTML 中显示来自 FETCH 的 JSON 数据

Question

I need to take the (html) section from each page in the array (0, 1) how would I go about doing this?我需要从数组 (0, 1) 中的每个页面中获取 (html) 部分，我将如何 go 这样做？ The API call worked perfectly fine, just need to take the main html data and display it on the webpage where the placeholders {welcome.text} and {about.text} are. API 调用工作得非常好，只需要获取主要的 html 数据并将其显示在占位符 {welcome.text} 和 {about.text} 所在的网页上。

Thanks for any help.谢谢你的帮助。

<!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>

JSON response after fetching from that URL.从 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
    }
  }
}

Answer 1

Change the {[identifier]} with a span or a container tag element and assign an unique id to it (in the example I am using a span tag).用 span 或 container 标签元素更改 {[identifier]} 并为其分配一个唯一的 id（在示例中我使用的是 span 标签）。

When the DOM is loaded create a variable for each container tag identified by the id (or query selector, you have many possibilities).加载 DOM 时，为每个由 id 标识的容器标签创建一个变量（或查询选择器，您有很多可能性）。

When the fetch operation succeded (I am using a test REST endpoint), extract the data and "populate" the container tag (assigned before) with the fetched data.当提取操作成功时（我正在使用测试 REST 端点），提取数据并使用提取的数据“填充”容器标签（之前分配的）。

Here is a working example:这是一个工作示例：

 // 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>

Hope it helps:)希望能帮助到你：）

在 HTML 中显示来自 FETCH 的 JSON 数据

问题描述

1 个解决方案

解决方案1
1 2020-06-30 17:57:54

在 HTML 中显示来自 FETCH 的 JSON 数据

问题描述

1 个解决方案

解决方案1 1 2020-06-30 17:57:54

解决方案1
1 2020-06-30 17:57:54