Hướng dẫn how to fetch data from api and display in html table - cách tìm nạp dữ liệu từ api và hiển thị trong bảng html

fetch["//dummy.restapiexample.com/api/v1/employees"].then[
  res => {
    res.json[].then[
      data => {
        console.log[data];
        if [data.length > 0] {

          var temp = "";
          data.forEach[[itemData] => {
            temp += "";
            temp += "" + itemData.id + "";
            temp += "" + itemData.employee_name + "";
            temp += "" + itemData.employee_salary + "";
          }];
          document.getElementById['data'].innerHTML = temp;
        }
      }
    ]
  }
]

  
        ID
        Employee Name
        Salary
      

fetch[] allows you to make network requests similar to XMLHttpRequest [XHR]. The main difference is that the Fetch API uses Promises, which enables a simpler and cleaner API, avoiding callback hell and having to remember the complex API of XMLHttpRequest.

Last Updated:

Tuesday December 21 2021 0714 AM

table {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

td,
th {
  border: 2px solid #999;
  padding: 0.5rem;
}

// main.js...

// 1. GET request using fetch[]
fetch["//jsonplaceholder.typicode.com/users"]
  // Converting received data to JSON
  .then[[response] => response.json[]]
  .then[[json] => {
    
  // 2. Create a variable to store HTML table headers
    let li = `IDNameUser NameEmail PhoneWebsite`;

    // 3. Loop through each data and add a table row
    json.forEach[[user] => {
      li += `
        ${user.id}
				${user.name} 
        ${user.username}
				${user.email}
        ${user.phone}
        ${user.website}
			`;
    }];

    // 4. DOM Display result
    document.getElementById["users"].innerHTML = li;
  }];

// main.js

// 5. POST request using fetch[]
fetch["//jsonplaceholder.typicode.com/posts", {
  // 6. Adding method type
  method: "POST",

  // 7. Adding body or contents to send JSON Stringify
  body: JSON.stringify[{
    title: "foo",
    body: "bar",
    userId: 1
  }],

  // 8. Adding headers to the request
  headers: {
    "Content-type": "application/json; charset=UTF-8"
  }
}]
  // 9. Converting to JSON
  .then[[response] => response.json[]]

  // 10. Displaying results to console
  .then[[json] => console.log[json]];

CSS bên ngoài

Bút này không sử dụng bất kỳ tài nguyên CSS bên ngoài nào.

JavaScript bên ngoài

Bút này không sử dụng bất kỳ tài nguyên JavaScript bên ngoài nào.

Làm cách nào để hiển thị thông tin API trong HTML?

Làm cách nào để hiển thị dữ liệu JSON từ API trong HTML?

Làm thế nào để bạn nhận được dữ liệu từ API bằng Fetch?

Làm cách nào để hiển thị bảng JSON trong HTML?