堆栈内存溢出
  简体   繁体   English

如何用 API GET HTTPS Response 中的数据创建一个表

[英]How to create a table with the data from API GET HTTPS Response

 原文  2023-01-21 15:17:24  0   2    javascript/ html/ arrays

问题描述

I have this code with html and JS:我有 html 和 JS 的代码：

<html>
    <head>
        <title>Curriculum</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="navbar">
            <a href = "project.html"><img src="logo.png" class="logo"></a>
            <ul>
                <li><a href ="project.html">Home</a></li>
                <li><a href="AboutUs.html">About Us</a></li>
                <li>
                    <div class="dropdown">
                        <a href="#">News</a>
                        <div class="dropdown-content">
                            <p><a href="News.WorldskillCompetition.html">Worldskill competition</a></p>
                            <p><a href="#">Scholarship contest</a></p>
                            <p><a href="#">Algebra Junior</a></p>
                        </div>
                    </li>
                <li><a href="#">Curriculum</a></li>
                <li><a href = "ContactForm.html">Contact</a></li>
            </ul>
        </div>
        <h1>Curriculum</h1>
        <hr>
        <input type="text", id="text", name="text">
        <table width="800px">
            <thead>
              <tr>
                <th width="200px">College</th>
                <th>ECTS</th>
                <th>Hours</th>
                <th>Lection</th>
                <th>Practice</th>
                <th width="300px">Type</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>hello</td>
                <td>test</td>
                <td>test2</td>
                <td>test3</td>
                <td>test4</td>
                <td>test5</td>
                <td>    <button type="button" onclick="getData()">Delete</button></td>
              </tr>
            <tfoot>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tfoot>
            </tbody>
        </table>
         <script src="./testing.js"></script>

    <script>
      async function getData() {
        const response = await fetch("https://www.fulek.com/data/api/supit/curriculum-list/hr", {
          method: "GET",
          headers: {
            "Content-Type": "text/plain;charset=UTF-8",
            Authorization:
              "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzEzNjM4LCJleHAiOjE2NzQzMTcyMzgsImlhdCI6MTY3NDMxMzYzOH0.8uZVS5PoyinrEDhMxtidBZ8epVe279n5E6o8mhIhHRQ",
          },
        });
        const data = response.json()

        return data.then(response => console.log(response.data));
      }
    </script>
    </body>
</html>

And the API GET Call returns this array as shown in the console: API GET 调用返回此数组，如控制台所示：

在此处输入图像描述

Here is one of the array elements as text这是作为文本的数组元素之一

{
      "id": 1,
      "kolegij": "Autentikacijski sustavi i baze podataka",
      "ects": 4,
      "sati": 45,
      "predavanja": 1,
      "vjezbe": 2,
      "tip": "Obavezni",
      "semestar": 3
    }

Here is the complete Array as text:这是作为文本的完整数组： 

 [{ "id": 1, "kolegij": "Autentikacijski sustavi i baze podataka", "ects": 4, "sati": 45, "predavanja": 1, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }, { "id": 2, "kolegij": "Engleski jezik", "ects": 4, "sati": 45, "predavanja": 0, "vjezbe": 3, "tip": "Obavezni", "semestar": 1 }, { "id": 3, "kolegij": "Građa računala", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 4, "kolegij": "ICT alati u projektnom menadžmentu", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 6 }, { "id": 5, "kolegij": "Interoperabilnost informacijskih sustava", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 6 }, { "id": 6, "kolegij": "Izrada aplikacija za mobilne uredžaje", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 5 }, { "id": 7, "kolegij": "Izrada završnog projekta/Praksa", "ects": 10, "sati": 0, "predavanja": 0, "vjezbe": 0, "tip": "Obavezni", "semestar": 6 }, { "id": 8, "kolegij": "Java Web Programiranje", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 6 }, { "id": 9, "kolegij": "Kineziološka kultura", "ects": 0, "sati": 30, "predavanja": 0, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 10, "kolegij": "Kineziološka kultura 2", "ects": 0, "sati": 30, "predavanja": 0, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 11, "kolegij": "Matematika 1", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 12, "kolegij": "Matematika 2", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 13, "kolegij": "Objektno orijentirano programiranje", "ects": 6, "sati": 75, "predavanja": 2, "vjezbe": 3, "tip": "Obavezni", "semestar": 3 }, { "id": 14, "kolegij": "Objektno orijentirano programiranje - praktikum u .NET okolini", "ects": 5, "sati": 60, "predavanja": 1, "vjezbe": 3, "tip": "Obavezni", "semestar": 4 }, { "id": 15, "kolegij": "Oblikovanje baza podataka", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }, { "id": 16, "kolegij": "Oblikovanje i izrada cjelovitog aplikativnog rješenja", "ects": 6, "sati": 60, "predavanja": 1, "vjezbe": 3, "tip": "Obavezni", "semestar": 6 }, { "id": 17, "kolegij": "Operacijski sustavi", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 18, "kolegij": "Organizacija i managem.net", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 5 }, { "id": 19, "kolegij": "Osnove digitalne elektronike", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 20, "kolegij": "Osnove poslovne ekonomije", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 2 }, { "id": 21, "kolegij": "Osnove poslovnog komuniciranja", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }, { "id": 22, "kolegij": "Poslovni informacijski sustavi", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 6 }, { "id": 23, "kolegij": "Pristup podacima iz programskog koda", "ects": 5, "sati": 60, "predavanja": 0, "vjezbe": 4, "tip": "Obavezni", "semestar": 5 }, { "id": 24, "kolegij": "Programiranje", "ects": 6, "sati": 75, "predavanja": 2, "vjezbe": 3, "tip": "Obavezni", "semestar": 1 }, { "id": 25, "kolegij": "Programiranje u Javi 1", "ects": 6, "sati": 75, "predavanja": 2, "vjezbe": 3, "tip": "Obavezni", "semestar": 4 }, { "id": 26, "kolegij": "Programiranje u Javi 2", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 5 }, { "id": 27, "kolegij": "Programsko inženjerstvo", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 5 }, { "id": 28, "kolegij": "Projektni menadžment", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 4 }, { "id": 29, "kolegij": "Projektni razvoj aplikacija", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 4 }, { "id": 30, "kolegij": "Računalna podrška uredskom poslovanju", "ects": 4, "sati": 45, "predavanja": 1, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 31, "kolegij": "Razvoj web aplikacija", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 4 }, { "id": 32, "kolegij": "Sigurnost informacijskih sustava 1", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 4 }, { "id": 33, "kolegij": "Standardi u primjeni inte.netske tehnologije", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }, { "id": 34, "kolegij": "Strukture podataka i algoritmi", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 35, "kolegij": "Sustavi potpore odlučivanju", "ects": 6, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Izborni", "semestar": 5 }, { "id": 36, "kolegij": "Upravljanje informacijskim sustavima", "ects": 4, "sati": 45, "predavanja": 2, "vjezbe": 1, "tip": "Obavezni", "semestar": 5 }, { "id": 37, "kolegij": "Uvod u baze podataka", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 2 }, { "id": 38, "kolegij": "Uvod u računalne mreže", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 1 }, { "id": 39, "kolegij": "Vjerojatnost i statistika", "ects": 5, "sati": 60, "predavanja": 2, "vjezbe": 2, "tip": "Obavezni", "semestar": 3 }]

What I want is for each line, to create a row in the table with the correct data for each column.我想要的是为每一行在表中创建一行，每一列都有正确的数据。 I am a beginner in the JS logic and I tried a few thing myself, but can't really get the hand of it yet.我是 JS 逻辑的初学者，我自己尝试了一些东西，但还不能真正掌握它。

EDIT2:编辑2：

<html>

<head>
  <title>Curriculum</title>
    <link rel="stylesheet" href="style.css">
     <script>
    async function getData() {
      let response_data = [
            async function getData() {
        const response = await fetch("https://www.fulek.com/data/api/supit/curriculum-list/hr", {
          method: "GET",
          headers: {
            "Content-Type": "text/plain;charset=UTF-8",
            Authorization:
              "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzIxMzUyLCJleHAiOjE2NzQzMjQ5NTIsImlhdCI6MTY3NDMyMTM1Mn0.fdSMzUEA_WYc5KGqXM2t2TPgpsBnabq5HPNZYCm1MJw",
          },
        });
        const data = response.json()
return data.then(response => response.data);
      }
      ];
      console.log(response_data);
      let li = `<tr><th>College</th><th>ECTS</th><th>Hours</th><th>Lection</th><th>Practice</th><th>Type</th></tr>`;
      response_data.forEach((data) => {
        li += `<tr>
            <td>${data.kolegij}</td>
            <td>${data.ects}</td>
            <td>${data.sati}</td>
            <td>${data.predavanja}</td>
            <td>${data.vjezbe}</td>
            <td>${data.tip}</td>`;
      });
      document.getElementById("table").innerHTML = li;
    }
  </script>
</head>

<body>
  <div class="navbar">
    <ul>
      <li><a href="project.html">Home</a></li>
      <li><a href="AboutUs.html">About Us</a></li>
      <li>
        <div class="dropdown">
          <a href="#">News</a>
          <div class="dropdown-content">
            <p>
              <a href="News.WorldskillCompetition.html">Worldskill competition</a
                >
              </p>
              <p><a href="#">Scholarship contest</a></p>
            <p><a href="#">Algebra Junior</a></p>
          </div>
        </div>
      </li>
      <li><a href="#">Curriculum</a></li>
      <li><a href="ContactForm.html">Contact</a></li>
    </ul>
  </div>
  <h1>Curriculum</h1>
  <hr />
  <input type="text" , id="text" , name="text" />
  <table id="table" width="800px">
    <thead>
      <tr>
        <th width="200px">College</th>
        <th>ECTS</th>
        <th>Hours</th>
        <th>Lection</th>
        <th>Practice</th>
        <th width="300px">Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>  
        <td><button type="button" onclick="getData()">Delete</button></td>
        <td>hello</td>
        <td>test</td>
        <td>test2</td>
        <td>test3</td>
        <td>test4</td>
        <td>test5</td>
      </tr>
    </tbody>
    <tfoot>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tfoot>
  </table>

 
</body>

</html>

this is the code and the response is this:这是代码，响应是这样的： 在此处输入图像描述

2 个解决方案

解决方案1
 0 已采纳  2023-01-21 18:06:25

You need to modify your code little bit.您需要稍微修改一下代码。 Please refer below code Snippet.请参考下面的代码片段。

HTML File: T able element only HTML 文件：仅表元素

<table id="table" width="800px">
<thead>
  <tr>
    <th width="200px">College</th>
    <th>ECTS</th>
    <th>Hours</th>
    <th>Lection</th>
    <th>Practice</th>
    <th width="300px">Type</th>
  </tr>
</thead>
<tbody id="table-body">
  <tr>  
    <td>Test</td>
    <td>hello</td>
    <td>test</td>
    <td>test2</td>
    <td>test3</td>
    <td>test4</td>
    <td>test5</td>
  </tr>
</tbody>
<tfoot>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tfoot>

If not needed you can remove static tr data from table body.如果不需要，您可以从表体中删除 static tr数据。 I have added ID for tbody and append the data into it.我已经添加了 tbody 的 ID 和 append 数据。

JS File: Modified and make it modularise. JS文件：修改并模块化。

    /* To Call API and generate table function */
function getData() {
        getDataFromAPI().then((response)=>{
        response.data.forEach((data) => {
        generateTableData(data)
      });
        })
    }

/* TO generate Table Data */
function generateTableData(data){
    var sel = document.querySelector('#table-body');
    sel.innerHTML +=`<tr>
            <td>${data.kolegij}</td>
            <td>${data.ects}</td>
            <td>${data.sati}</td>
            <td>${data.predavanja}</td>
            <td>${data.vjezbe}</td>
            <td>${data.tip}</td>
            </tr>`
    }
    
/* To call an api function */
async function getDataFromAPI(){
        const response = await fetch("https://www.fulek.com/data/api/supit/curriculum-list/hr", {
          method: "GET",
          headers: {
            "Content-Type": "text/plain;charset=UTF-8",
            Authorization:
              "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzIxMzUyLCJleHAiOjE2NzQzMjQ5NTIsImlhdCI6MTY3NDMyMTM1Mn0.fdSMzUEA_WYc5KGqXM2t2TPgpsBnabq5HPNZYCm1MJw",
          },
        })
        return response.json();
    }

I have removed Delete button and moved it to above table.我删除了删除按钮并将其移至上表。 You can pass it to anywhere you want.您可以将其传递到任何您想要的地方。

<button type="button" onclick="getData()">Get Data</button>

Hope this is what you want.希望这就是你想要的。 For live demo you can refer this JSFiddle .对于现场演示，您可以参考这个JSFiddle 。

解决方案2
 -2  2023-01-21 15:52:10

The easiest way that i can imagine right now (for a beginner) is that you could try to create an empty Array in the beginning and then store the response that you get from your request in this array.我现在可以想象的最简单的方法（对于初学者）是您可以尝试在开始时创建一个空数组，然后将您从请求中获得的响应存储在该数组中。 Afterwards you can try to append the Data (eg with a loop) you got to the innerHTML of the divs that you already created.之后你可以尝试 append 你到达你已经创建的 div 的 innerHTML 的数据（例如用循环）。

To be honest, from personal experience i wouldn't recommend this way but regarding to the fact you are just beginning with HTML and JS it's a good way to get used to the fundemental stuff of HTML and JS.老实说，根据个人经验，我不会推荐这种方式，但考虑到您刚刚开始使用 HTML 和 JS，这是习惯 HTML 和 JS 基础知识的好方法。

See: How to fetch api data and display it参见： 如何获取api数据并显示

As SelVazi also commented, i would personally use Datatables to display the Data after you got more experience in working with HTML and JS.正如 SelVazi 还评论的那样，在您获得更多使用 HTML 和 JS 的经验后，我会亲自使用 Datatables 来显示数据。

I hope i could give you some inspirations of how you can solve your problem.我希望我能给你一些关于如何解决你的问题的灵感。

EDIT: Try this Solution regarding to my first suggestion: Of course you have to change the data to your response from the API.编辑：针对我的第一个建议尝试此解决方案：当然，您必须将数据更改为来自 API 的响应。 

 <html> <head> <title>Curriculum</title> <script> let response_data = []; async function getData() { const response = await fetch( "https://www.fulek.com/data/api/supit/curriculum-list/hr", { method: "GET", headers: { "Content-Type": "text/plain;charset=UTF-8", Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiQXBvb0JHIiwibmJmIjoxNjc0MzIxMzUyLCJleHAiOjE2NzQzMjQ5NTIsImlhdCI6MTY3NDMyMTM1Mn0.fdSMzUEA_WYc5KGqXM2t2TPgpsBnabq5HPNZYCm1MJw", }, } ); let apiData = await response.json().then((res) => { let li = `<tr><th>College</th><th>ECTS</th><th>Hours</th><th>Lection</th><th>Practice</th><th>Type</th></tr>`; response_data.push(res.data); for (let i = 0; i < response_data[0].length; i++) { li += `<tr> <td>${response_data[0][i].kolegij}</td> <td>${response_data[0][i].ects}</td> <td>${response_data[0][i].sati}</td> <td>${response_data[0][i].predavanja}</td> <td>${response_data[0][i].vjezbe}</td> <td>${response_data[0][i].tip}</td>`; } document.getElementById("table").innerHTML = li; }); } </script> </head> <body> <div class="navbar"> <ul> <li><a href="project.html">Home</a></li> <li><a href="AboutUs.html">About Us</a></li> <li> <div class="dropdown"> <a href="#">News</a> <div class="dropdown-content"> <p> <a href="News.WorldskillCompetition.html" >Worldskill competition</a > </p> <p><a href="#">Scholarship contest</a></p> <p><a href="#">Algebra Junior</a></p> </div> </div> </li> <li><a href="#">Curriculum</a></li> <li><a href="ContactForm.html">Contact</a></li> </ul> </div> <h1>Curriculum</h1> <hr /> <input type="text", id="text", name="text" /> <table id="table" width="800px"> <thead> <tr> <th width="200px">College</th> <th>ECTS</th> <th>Hours</th> <th>Lection</th> <th>Practice</th> <th width="300px">Type</th> </tr> </thead> <tbody> <tr> <td><button type="button" onclick="getData()">Delete</button></td> <td>hello</td> <td>test</td> <td>test2</td> <td>test3</td> <td>test4</td> <td>test5</td> </tr> </tbody> <tfoot> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tfoot> </table> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从API响应获取数据并显示在表中 - Get Data from API response and show in table 如何从 https 中获取数据。在 node.js 中获取响应 - How to get data from https.get response in node js 如何从Angular的api响应中获取数据 - How to get data from api response in Angular 如何使用 React js 在表中呈现来自 API 响应的数据 - How to render data from a API response in a table using react js Angular 2：如何从 API 获取服务响应数据到 Select 选项 - Angular 2: How to GET service response data from API to the Select Option 如何从请求 API 获取响应数据 XML？ - How to Get Response Data XML From Request API? 如何创建一个javascript表并从输入中获取计算作为表数据 - How to create a javascript table and get a calculations from input as table data 如何将 API 响应数据拉入 HTML 表 - How to pull a API Response data into a HTML Table 如何从 API 获取数据并在表中呈现数据？ - How to fetch get data from API and render data in a table? 如何从 API 获取响应数据并从数据中编码函数以使用 node js JavaScript 获取结果 - How to get the response data from API and code the function from data to get the result using node js JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM