Hướng dẫn how show json data in html div? - cách hiển thị dữ liệu json trong div html?

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tìm nạp và hiển thị dữ liệu từ tệp JSON bằng Vanilla JavaScript.

Vậy làm thế nào chúng ta sẽ đạt được điều này?

Đầu tiên, chúng tôi sẽ tìm nạp dữ liệu JSON bằng cách sử dụng API tìm nạp. Điều này sẽ trả lại một lời hứa với dữ liệu JSON của chúng tôi. Sau đó, chúng tôi sẽ nối dữ liệu một cách linh hoạt bằng cách tạo các phần tử HTML một cách nhanh chóng. Sau đó, chúng tôi sẽ nối dữ liệu JSON của chúng tôi vào các yếu tố đó.

Lấy dữ liệu JSON từ API và hiển thị nó trên trang web là một điều phổ biến bạn sẽ làm khá thường xuyên. Tôi đã tạo ra các bài viết tương tự trên các khung lớn như React, Vue và Angular. Kiểm tra xem bạn có đang sử dụng bất kỳ khung nào trong số đó không.

Bắt đầu nào!

Đầu tiên, hãy tạo tệp

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

[
    {
        "id": "1",
        "firstName": "John",
        "lastName": "Doe"
    },
    {
        "id": "2",
        "firstName": "Mary",
        "lastName": "Peterson"
    },
    {
        "id": "3",
        "firstName": "George",
        "lastName": "Hansen"
    }
]

Chúng tôi sẽ lưu tệp này trong cùng thư mục với tệp

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

Tìm nạp dữ liệu JSON

Để có thể hiển thị dữ liệu này trong tệp HTML của chúng tôi, trước tiên chúng tôi cần tìm nạp dữ liệu bằng JavaScript.

Chúng tôi sẽ tìm nạp dữ liệu này bằng cách sử dụng API tìm nạp. Chúng tôi sử dụng

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

Tham số

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

Hàm

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

Nếu bất cứ điều gì sai (như tệp JSON không thể được tìm thấy), hàm

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

Hãy cho chúng tôi xem điều này sẽ xem xét như thế nào trong ví dụ:

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

Ở đây chúng tôi đang tìm nạp tệp

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

Hàm

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

Bây giờ chúng tôi có thể lấy dữ liệu này và hiển thị nó trên trang HTML của chúng tôi. Lưu ý rằng chúng tôi đang gọi một hàm gọi là

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

Lưu ý rằng trong chức năng

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

Hiển thị dữ liệu JSON

Trước khi chúng tôi hiển thị dữ liệu JSON của chúng tôi trên trang web, hãy để chỉ xem phần thân của tệp

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

<body>
  <div id="myData"></div>
</body>

Khá đơn giản phải không? Chúng tôi chỉ có một Div đơn giản với ID

<body>
  <div id="myData"></div>
</body>

Có một số cách để hiển thị dữ liệu trong HTML của chúng tôi. Chúng tôi có thể tạo ra một bàn và làm cho nó trông thực sự tốt với kiểu dáng đẹp. Tuy nhiên, chúng tôi sẽ làm điều này một cách đơn giản và xấu xí.

Mục tiêu của chúng tôi là chỉ đơn giản là hiển thị tên đầy đủ của những người trong tệp JSON của chúng tôi.

Bước 1 - Lấy phần tử div từ cơ thể

Bạn có nhớ Div với ID

<body>
  <div id="myData"></div>
</body>

Đây là cách chúng tôi sẽ làm điều đó:

var mainContainer = document.getElementById("myData");

Chúng tôi nhận được phần tử bằng cách thực thi chức năng

<body>
  <div id="myData"></div>
</body>

<body>
  <div id="myData"></div>
</body>

Bước 2 - Vòng lặp qua mọi đối tượng trong đối tượng JSON của chúng tôi

Bước tiếp theo là tạo một vòng lặp đơn giản. Sau đó, chúng tôi có thể nhận mọi đối tượng trong danh sách đối tượng JSON của chúng tôi và nối nó vào Div chính của chúng tôi.

for (var i = 0; i < data.length; i++) {
  // append each person to our page
}

Bước 3 - Phụ lục mỗi người vào trang HTML của chúng tôi

Bên trong vòng lặp, chúng tôi sẽ nối mỗi người bên trong Div của chính mình. Mã này sẽ được lặp lại ba lần cho mỗi người.

Đầu tiên, chúng tôi sẽ tạo một phần tử div mới:

var div = document.createElement("div");

Tiếp theo, chúng tôi sẽ điền vào div đó bằng tên đầy đủ từ tệp JSON của chúng tôi.

div.innerHTML = 'Name: ' + data[i].firstName + ' ' + data[i].lastName;

Cuối cùng, chúng tôi sẽ nối div này vào thùng chứa chính của chúng tôi:

mainContainer.appendChild(div);

Đó là nó. Bây giờ chúng tôi đã hoàn tất việc nối thêm dữ liệu JSON vào trang Index.html của chúng tôi. Hàm

fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

function appendData(data) {
  var mainContainer = document.getElementById("myData");
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");
    div.innerHTML = 'Name: ' + data[i].firstName + ' ' + data[i].lastName;
    mainContainer.appendChild(div);
  }
}

Khi chúng tôi chạy trang index.html của mình, nó sẽ trông giống như thế này:

Không phải là ứng dụng đẹp nhất, nhưng nó đã hoàn thành công việc.

Chúng ta hãy xem toàn bộ tệp HTML với JavaScript:

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

Cố gắng sao chép và dán cái này vào trình soạn thảo của riêng bạn. Là một bài tập, bạn có thể cố gắng tạo kiểu đầu ra để trông đẹp hơn. Hãy nhớ bao gồm tệp

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

fetch(url)
  .then(function (response) {
    // The JSON data will arrive here
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });

Tại sao sử dụng vani JavaScript?

Bạn có thể tự hỏi điểm nào của việc tạo ra điều này trong Vanilla JavaScript. Liệu ứng dụng web hiện đại sử dụng các khung và thư viện như Angular, Reactjs hoặc Vuejs?

Vâng, yeah, bạn có thể đúng, hầu hết thời gian. Nhưng một số trang web chỉ là tĩnh với rất ít logic.

Nếu bạn chỉ muốn điều chỉnh một số phần nhỏ của trang web, có thể quá mức cần thiết để bao gồm các thư viện lớn sẽ làm chậm trang web.

Bên cạnh đó, khung và thư viện đến và đi. Vanilla JavaScript cũ tốt ở đây để ở lại. Vì vậy, hãy tận dụng mọi cơ hội để tìm hiểu nó, bạn không biết khi nào bạn có thể cần nó.

Mã hóa hạnh phúc!

Làm thế nào hiển thị dữ liệu JSON trong HTML Div?

Làm thế nào hiển thị dữ liệu JSON từ URL trong HTML?

Làm thế nào thêm thẻ dữ liệu JSON trong HTML?

Chúng ta có thể phân tích JSON trong HTML không?