Hiển thị dữ liệu json từ url trong bảng html

Định dạng JSON được sử dụng nhiều để lưu trữ dữ liệu theo cách có cấu trúc. Ngay cả dữ liệu nhận được từ máy chủ cũng ở định dạng JSON. Ở đây chúng ta sẽ xem cách hiển thị dữ liệu JSON trong trang HTML bằng JavaScript dưới dạng bảng và danh sách

Dữ liệu JSON có cấu trúc như một đối tượng javascript. Dữ liệu được lưu trữ trong các cặp khóa-giá trị, trong đó khóa là một chuỗi và giá trị có thể là bất kỳ loại dữ liệu nào

Đầu tiên, bạn có thể nghĩ đến việc hiển thị những dữ liệu này trực tiếp dưới dạng văn bản trên trang web nhưng điều này trông không hấp dẫn và cũng không thể đọc được

Vì vậy, trong bài viết này, chúng tôi sẽ tìm nạp dữ liệu JSON từ máy chủ cục bộ hoặc máy chủ từ xa và hiển thị nó theo cách tốt hơn

---

Hiển thị dữ liệu JSON trong trang HTML bằng JavaScript

Để bắt đầu làm việc, hãy theo dõi dữ liệu JSON của chúng tôi. liên kết nguồn

{
  "result": [
    {
      "name": "John",
      "marks":{
        "math":"78",
        "english":"90",
        ...
      }
    },
    {
      "name": "Mike",
      "marks":{
        "math":"67",
        "english":"86",
        ...
      }
    },
    ...
  ]
}

Bây giờ chúng tôi sẽ lấy dữ liệu JSON này từ máy chủ từ xa và hiển thị nó trên trang web

Để đọc dữ liệu JSON từ máy chủ cục bộ hoặc máy chủ từ xa, chúng tôi sẽ sử dụng phương thức

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

0

Phương thức fetch() lấy URL của tệp JSON làm đối số và trả về a . object.

Sau khi giải quyết đối tượng Lời hứa , chúng tôi sẽ nhận được dữ liệu JSON trong Phản hồi object.

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

Chúng tôi có dữ liệu JSON trong dữ liệu được lưu trữ trong một biến. Bây giờ chúng ta có thể sử dụng nó để hiển thị dữ liệu trong trang web.

---

1. Hiển thị dữ liệu JSON dưới dạng danh sách

Để hiển thị dữ liệu JSON trong danh sách, chúng tôi sẽ tạo động các phần tử HTML và chèn dữ liệu vào chúng

Các yếu tố chúng ta cần tạo ở đây là

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

1 và

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

2

Trước khi chúng tôi bắt đầu, hãy ghi nhớ cấu trúc dữ liệu của dữ liệu JSON. Hình ảnh dưới đây cho thấy để lấy tên học sinh đầu tiên, chúng ta phải sử dụng

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

3 và để lấy điểm của học sinh đầu tiên, chúng ta phải sử dụng

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

4, nơi để truy cập điểm của môn toán, chúng ta phải sử dụng

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

5

Lưu ý cấu trúc trên, trước tiên chúng ta tạo một phần tử

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

1 và gán nó cho một biến

const mainUL = document.createElement('ul')

Phần tử

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

1 này sẽ là phần tử chính, bất kỳ phần tử danh sách nào (

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

2) sẽ đại diện cho một học sinh và điểm của họ và sẽ được tạo động

Bây giờ chúng ta có thể tạo vòng lặp for sẽ lặp qua mảng

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

9 và tạo phần tử

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

2 cho mỗi học sinh và đặt InternalHTML của phần tử

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

2 thành tên học sinh

for(let i = 0; i < data.result.length; i++) {
  const studentLI = document.createElement('li');
  studentLI.innerHTML = data.result[i].name;
}

Bây giờ hãy tạo một danh sách khác sẽ chứa tất cả các điểm của sinh viên và nối nó vào phần tử

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

2 (studentLI) được tạo ngay trước đó

for(let i = 0; i < data.result.length; i++) {
  const studentLI = document.createElement('li');
  studentLI.innerHTML = data.result[i].name;

  // create list for marks
  const marksUL = document.createElement('ul');
  for(var key in data.result[i].marks) {
    const marksLI = document.createElement('li');
    marksLI.innerHTML = key + ': ' + data.result[i].marks[key];
    marksUL.appendChild(marksLI);
  }

  // append marks list to studentLI
  studentLI.appendChild(marksUL);
}

Bây giờ chúng tôi đã tạo một danh sách các sinh viên và điểm của họ. Bây giờ chúng ta có thể nối phần tử

fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))

1 với phần tử

const mainUL = document.createElement('ul')

4

// append studentLI to mainUL
mainUL.appendChild(studentLI);

Cuối cùng, nối nó vào cơ thể. Đây là mã hoàn chỉnh để hiển thị danh sách sinh viên và điểm của họ

Thí dụ

Show List

▶ Dùng thử

đầu ra

---

2. Hiển thị dữ liệu JSON dưới dạng bảng

Để hiển thị dữ liệu JSON trong một bảng, chúng ta sẽ tạo một hàm lấy dữ liệu JSON làm đối số và tạo một bảng và nối nó vào phần thân

Trong hàm createtable() tạo cấu trúc cơ bản của bảng để chúng ta có tiêu đề của bảng là 'tên' và . Bên dưới các dấu này tạo một danh sách khác để hiển thị chủ đề như trong mã bên dưới.

var table = "";
// add a row for name and marks
table += ``;
// now add another row to show subject
table += ``;
Bây giờ chúng ta có thể tạo một vòng lặp for sẽ lặp qua mảng 
fetch(URL)
  // get the JSON data
  .then(response => response.json())
  // use (display) the JSON data
  .then(data => console.log(data))
9 và tạo một phần tử 
const mainUL = document.createElement('ul')
6 cho mỗi học sinh và đặt InternalHTML của phần tử 
const mainUL = document.createElement('ul')
6 thành tên học sinh
// now loop through students
// show their name and marks
var tr = "";
for(let i = 0; i < data.result.length; i++) {
  tr += "
";
  tr += ``;
  for (var key in data.result[i].marks) {
    tr += ``;
  }
  tr += ""
}
Cuối cùng, nối thêm bảng vào phần thân. Đây là mã Javascript hoàn chỉnh để tìm nạp dữ liệu JSON và hiển thị dưới dạng bảng
Thí dụ
function showTable(){
  fetch("./lib/examples/students.json")
    .then(response => response.json())
    .then(data => createTable(data));
}
    
function createTable(data) {
var table = "

            
Name
            
Marks
          

            

            
Math
            
English
            
Chemistry
            
Physics
          
${data.result[i].name}
${data.result[i].marks[key]}
";
// add a row for name and marks
table += ``;
// now add another row to show subject
table += ``;
// now loop through students
// show their name and marks
var tr = "";
for(let i = 0; i < data.result.length; i++) {
  tr += "";
  tr += ``;
  for (var key in data.result[i].marks) {
    tr += ``;
  }
  tr += ""
}
table += tr + "

            
Name
            
Marks
          

            

            
Math
            
English
            
Chemistry
            
Physics
          
${data.result[i].name}
${data.result[i].marks[key]}
";

  // append table to body
  document.body.innerHTML += table;
}

▶ Dùng thử

đầu ra

---

Phần kết luận

Trong hướng dẫn ngắn này, chúng ta đã thấy cách tìm nạp và hiển thị dữ liệu JSON trong các trang HTML bằng javascript. Chúng tôi đã hiển thị dữ liệu dưới dạng danh sách và bảng với phần giải thích đầy đủ về mã

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

Mã jQuery sử dụng phương thức getJSON() để tìm nạp dữ liệu từ vị trí của tệp bằng yêu cầu AJAX HTTP GET . Phải mất hai đối số. Một là vị trí của tệp JSON và một là hàm chứa dữ liệu JSON. Hàm each() được sử dụng để lặp qua tất cả các đối tượng trong mảng.

Bạn sẽ hiển thị dữ liệu từ tệp JSON trong bảng như thế nào?

Để sử dụng hàm PHP file_get_contents() chúng ta có thể đọc một tệp và truy xuất dữ liệu có trong tệp JSON. Sau khi lấy dữ liệu cần chuyển định dạng JSON sang định dạng mảng. Sau đó, với việc sử dụng câu lệnh lặp sẽ hiển thị dưới dạng bảng.

Tôi làm cách nào để lấy dữ liệu JSON từ URL?

loads() trả về đối tượng JSON. Dưới đây là quy trình mà chúng ta có thể đọc phản hồi JSON từ một liên kết hoặc URL trong python. .

Nhập các mô-đun cần thiết

Chỉ định URL

Nhận phản hồi của URL bằng cách sử dụng urlopen()

Chuyển đổi nó thành phản hồi JSON bằng json. tải ()

Hiển thị phản hồi JSON được tạo