以HTML显示来自FETCH的JSON数据

时间：2020-06-30 17:37:40

标签： html json api fetch

我需要从数组（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
    }
  }
}

1 个答案:

答案 0 :(得分：1)

使用跨度或容器标签元素更改{[identifier]}并为其分配唯一的ID（在示例中，我使用的是跨度标签）。

在加载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>

希望它会有所帮助：）

相关问题
最新问题