Hướng dẫn này sẽ hướng dẫn các ví dụ về cách tạo danh sách HTML từ dữ liệu JSON trong Javascript. Tải xuống mã miễn phí bao gồm.

Bạn đang xem : json để liệt kê javascript

Chào mừng bạn đến với hướng dẫn nhanh về cách tạo danh sách HTML từ dữ liệu JSON trong Javascript. Bạn muốn tạo động một danh sách từ dữ liệu JSON?

Để tạo danh sách HTML từ dữ liệu JSON:

  1. Phân tích cú pháp dữ liệu JSON thành một mảng trước (giả sử nó là một mảng phẳng) – var data = JSON.parse (DATA);
  2. Lặp qua mảng và tạo danh sách HTML.
    • var list = document.createElement ("ul");
    • for (let i of data) {var item = document.createElement ("li"); list.appendChild (item); }
  3. Cuối cùng, nối danh sách vào nơi bạn muốn – document.getElementById (ID) .appendChild (list);

Điều đó sẽ bao gồm những điều cơ bản, nhưng hãy đọc để biết thêm các ví dụ!

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ở đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào.

TRANG TRÌNH BÀY NHANH

MỤC LỤC

TẢI XUỐNG & amp; LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa.

LƯU Ý NHANH

Nếu bạn phát hiện ra lỗi, vui lòng bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem

Nếu bạn phát hiện lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời những câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình

TẢI XUỐNG MÃ VÍ DỤ

Nhấp vào đây để tải xuống tất cả mã nguồn mẫu , tôi đã phát hành mã nguồn này theo giấy phép MIT, vì vậy hãy xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.

Xem Thêm  Tổng quan và ví dụ về SQL OUTER JOIN - tham gia bên ngoài trong sql

DANH SÁCH HTML TỪ DỮ LIỆU JSON

Được rồi, bây giờ chúng ta hãy xem các ví dụ về cách tạo danh sách HTML từ dữ liệu JSON.

1) TẠO YẾU TỐ

1-create-element.html

  & lt;! - (A) DIV CONTAINER - & gt;
& lt; div id = "demoA" & gt; & lt; / div & gt;

& lt;! - (B) JAVASCRIPT - & gt;
& lt; script & gt;
// (B1) JSON STRING ĐỂ ĐẾN
var data = '["Red", "Green", "Blue"]';
data = JSON.parse (dữ liệu);

// (B2) TẠO DANH SÁCH
var list = document.createElement ("ol");
for (let i of data) {
  let item = document.createElement ("li");
  item.innerHTML = i;
  list.appendChild (item);
}

// (B3) PHÊ DUYỆT DANH SÁCH VÀO CONTAINER
document.getElementById ("demoA"). appendChild (danh sách);
& lt; / script & gt;  

Đây là “phiên bản đầy đủ” của đoạn trích trong phần giới thiệu và nó phải khá dễ hiểu:

  • Chúng tôi sử dụng JSON.parse () để chuyển chuỗi JSON trở lại thành một mảng.
  • Tạo danh sách HTML bằng document.createElement ("ol") .
  • Sau đó, lặp qua mảng, nối các mục danh sách – for (let i of data) {... document.createElement ("li") ...} .
  • Cuối cùng, hãy thêm danh sách vào nơi cần thiết – document.getElementById (TARGET) .appendChild (list) .

2) DÂY HTML HƯỚNG DẪN

2-html-string.html

  & lt;! - (A) DIV CONTAINER - & gt;
& lt; div id = "demoB" & gt; & lt; / div & gt;
 
& lt;! - (B) JAVASCRIPT - & gt;
& lt; script & gt;
// (B1) JSON STRING ĐỂ ĐẾN
var data = '["Red", "Green", "Blue"]';
data = JSON.parse (dữ liệu);
 
// (B2) TẠO DANH SÁCH
var list = "& lt; ul & gt;";
for (let i of data) {
  list + = `& lt; li & gt; $ {i} & lt; / li & gt;`;
}
danh sách + = "& lt; / ul & gt;";

// (B3) PHÊ DUYỆT DANH SÁCH VÀO CONTAINER
document.getElementById ("demoB"). innerHTML = list;
& lt; / script & gt;  

Không thích cách “hướng đối tượng” khi sử dụng createElement () appendChild ()? Đây là một giải pháp thay thế, thay vào đó chúng tôi tạo một chuỗi HTML.

3) ĐỐI TƯỢNG ĐƯỢC YÊU CẦU & amp; DANH SÁCH

3-nested.html

  & lt;! - (A) DIV CONTAINER - & gt;
& lt; div id = "demoC" & gt; & lt; / div & gt;
 
& lt;! - (B) JAVASCRIPT - & gt;
& lt; script & gt;
// (B1) DÒNG JSON ĐẾN ĐỐI TƯỢNG
var data = '{"Fruits": ["Durian", "Elderberries", "Feijoa"], "Vegetables": ["Corn", "Daikon", "Eggplant"]}';
data = JSON.parse (dữ liệu);
 
// (B2) TẠO DANH SÁCH
var list = document.createElement ("ul");
cho (hãy để tôi trong dữ liệu) {
  // DANH MỤC MỤC
  let item = document.createElement ("li");
  list.appendChild (item);
 
  // TIÊU ĐỀ PHẦN SUB
  let head = document.createElement ("mạnh");
  head.innerHTML = i;
  item.appendChild (head);
 
  // MỤC PHỤ KIỆN
  let sublist = document.createElement ("ul");
  item.appendChild (danh sách con);
  for (cho j trong số dữ liệu [i]) {
    let subitem = document.createElement ("li");
    subitem.innerHTML = j;
    sublist.appendChild (subitem);
  }
}
 
// (B3) PHÊ DUYỆT DANH SÁCH VÀO CONTAINER
document.getElementById ("demoC"). appendChild (danh sách);
& lt; / script & gt;  

Cuối cùng, điều gì sẽ xảy ra nếu chúng ta có một đối tượng lồng nhau? Hãy bình tĩnh và xem xét cẩn thận, chúng ta cũng đang làm như vậy. Phân tích cú pháp dữ liệu JSON thành một đối tượng, sau đó lặp qua đối tượng lồng nhau để tạo danh sách lồng nhau.

Xem Thêm  Hàm GETDATE () của SQL Server và các trường hợp sử dụng của nó - hẹn hò bằng sql

NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT

Đó là tất cả cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn.

LIÊN KẾT & amp; TÀI LIỆU THAM KHẢO

  • Cách tạo bảng từ dữ liệu JSON trong Javascript – Code Boxx

BẢNG CHEAT HÌNH ẢNH

HẾT

Cảm ơn bạn đã đọc, và chúng ta đã đi đến cuối cùng. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn, và nếu bạn muốn chia sẻ bất cứ điều gì về hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề json để liệt kê javascript

1.4: JSON – Working with Data and APIs in JavaScript

  • Tác giả: The Coding Train
  • Ngày đăng: 2019-05-25
  • Đánh giá: 4 ⭐ ( 5777 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS

    With our previous projects, we learned about fetch() and tabular data. This next project will show you how to work with JSON data from an API including how to load JSON data with fetch() and update DOM element.

    🔗 Where the ISS at?: https://wheretheiss.at/
    🔗 JSON chrome extension: https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en

    🎥 NEXT LESSON: https://youtu.be/nZaZ2dB6pow
    🎥 PREVIOUS LESSON: https://youtu.be/5-ptp9tRApM
    🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X

    🚂 Website: http://thecodingtrain.com/
    💖 Patreon: https://patreon.com/codingtrain
    🛒 Store: https://www.designbyhumans.com/shop/codingtrain/
    📚 Books: https://www.amazon.com/shop/thecodingtrain

    🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
    🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

    🔗 p5.js: https://p5js.org
    🔗 Processing: https://processing.org

    📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

JSON Trong JavaScript

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 5611 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON là viết tắt của JavaScript Object Notation. JSON là định dạng để trao đổi dữ liệu một cách nhỏ gọn. JSON là một ngôn ngữ độc lập. JSON dễ để đọc hiểu.

Truyền dữ liệu JSON với JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 2349 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ tìm hiểu về cách truyền dữ liệu JSON với JavaScript.

Nhận định file json là gì

  • Tác giả: tophuongloan.com
  • Đánh giá: 5 ⭐ ( 7021 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON là viết tắt của JavaScript Object Notation, là một kiểu định dạng dữ liệu tuân theo một quy luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nay đều

Hướng dẫn xử lý JSON trong JavaScript

  • Tác giả: openplanning.net
  • Đánh giá: 3 ⭐ ( 3614 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hàm JSON trong Power Apps – Power Apps

  • Tác giả: docs.microsoft.com
  • Đánh giá: 5 ⭐ ( 8206 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thông tin tham khảo bao gồm cả cú pháp và ví dụ về hàm JSON trong Power Apps.

Xử Lý Dữ Liệu JSON Đơn Giản Với Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 7827 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON – Javascript Object Notation, là bộ quy tắc về cách trình bày và mô tả dữ liệu trong một chuỗi lớn thống nhất được gọi chung là chuỗi JSON.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Bộ trường HTML: Nhóm các phần tử của biểu mẫu của bạn một cách hiệu quả nhất - Fieldet trong html là gì

By ads_php