Chuyển đổi danh sách JSON sang html

Trình bao bọc Python để chuyển đổi JSON thành biểu diễn Bảng HTML có thể đọc được của con người

Ví dụ sử dụng

ví dụ 1. sử dụng cơ bản

from json2html import *
input = {
        "name": "json2html",
        "description": "Converts JSON to HTML tabular representation"
}
json2html.convert(json = input)

đầu ra

namejson2htmldescriptionconverts JSON to HTML tabular representation

Tên

json2html

sự miêu tả

Chuyển đổi biểu diễn dạng bảng JSON sang HTML

ví dụ 2. Đặt thuộc tính tùy chỉnh cho bảng

from json2html import *
input = {
        "name": "json2html",
        "description": "Converts JSON to HTML tabular representation"
}
json2html.convert(json = input, table_attributes="id=\"info-table\" class=\"table table-bordered table-hover\"")

đầu ra

namejson2htmldescriptionConverts JSON to HTML tabular representation

ví dụ 3. Clubbing cùng phím của. Mảng đối tượng

from json2html import *
input = {
        "sample": [{
                "a":1, "b":2, "c":3
        }, {
                "a":5, "b":6, "c":7
        }]
}
json2html.convert(json = input)

đầu ra

samplebca231675

Ví dụ 4. Mỗi hàng cho (các) khóa khác nhau của. Mảng đối tượng

from json2html import *
input = {
        "sample": [{
                "a":1, "b":2, "c":3
        }, {
                "1a1":5, "1b1":6, "c":7
        }]
}
json2html.convert(json = input)

đầu ra

sample
  • a1c3b2
  • 1b16c71a15

Ví dụ 5. [Nguồn. json. tổ chức/ví dụ]

________số 8_______

đầu ra

glossaryGlossDivGlossListGlossEntryGlossDefGlossSeeAlso
  • GML
  • XML
paraA meta-markup language, used to create markup languages such as DocBook.GlossSeemarkupAcronymSGMLGlossTermStandard Generalized Markup LanguageAbbrevISO 8879:1986SortAsSGMLIDSGMLtitleStitleexample glossary

jQuery tương tác với HTML DOM để thao tác các phần tử HTML. Bài viết này cung cấp hướng dẫn quy trình để chuyển đổi dữ liệu JSON sang bảng HTML bằng JavaScript/jQuery

Dữ liệu JSON chuyển đổi thành Bảng HTML như thế nào?

Firstly, of all, a document form is created with

tag, in which an HTML table is created with tag. After that, a JavaScript library is imported to employ the built-in features of jQuery. Finally, the JSON data is converted to the formatted table in the HTML document using JavaScript/jQuery.

Để thực hành chức năng này, chúng tôi đã cung cấp một ví dụ chi tiết tại đây

Thí dụ

Để hiểu rõ hơn, mã ví dụ được chia thành bốn phần. Những khối này được gọi là một phần cụ thể. Hãy tìm hiểu sâu về chúng

Phần 1. Tạo một bảng và chèn JavaScript/jQuery

< html >

< đầu >

< h2 > Ví dụ chuyển dữ liệu json sang bảng html bằng jquery h2>

< id biểu mẫu ="form1" ><div>

< id bảng ="htmltable" đường viền< . sụp đổ;" ="1" cellpadding="3" style="border-collapse: collapse;">

bảng>div>< table>div>form>body>

html>
html>

< loại tập lệnh ="văn bản/javascript" . //mã số. jquery. com/jquery-3. 6. 0. js" ="http://code.jquery.com/jquery-3.6.0.js"> tập lệnh >

< loại tập lệnh ="văn bản/javascript">

trong mã

  • A table is created with
tag and various styles are added to it.
  • Finally, jQuery is imported in this section of code by

    • Phương thức addcols() được sử dụng bằng cách chuyển danh sách dữ liệu JSON
    • Sau đó, một vòng lặp for được sử dụng để lưu trữ độ dài của danh sách trong biến rows
    • Một vòng lặp for khác được triển khai để thực thi cho đến khi đạt được số lượng phần tử trong các hàng
    • Trong vòng lặp này, thuộc tính append được sử dụng để chèn các giá trị chính vào bảng HTML

    Chuyển đổi danh sách JSON sang html

    phần 4. Chuyển đổi dữ liệu JSON thành bảng HTML

    function htmltable ( list ) {

    var cols = addcols ( list );

    for ( var i = 0; i < list.độ dài; i ++) {

    var row = $ (');

    for ( var colIndex = 0; colIndex < cols.độ dài; colIndex ++) {

    var cv = danh sách [ i ][cols[colIndex]];

    if ( cv == null) { cv = ""; }

    hàng. chắp thêm( $ (' . ).html( cv ));}

    $ ("#htmltable") . chắp thêm( hàng );}}

    tập lệnh>đầu>< script>head><body>

    Mô tả của đoạn mã này được đưa ra dưới đây

    Chuyển đổi danh sách JSON sang html

    đầu ra

    Chuyển đổi danh sách JSON sang html

    Đầu ra trả về việc thực thi tất cả các phần mã trên trong bảng HTML. Tên, Giáo dục và Vị trí được trình bày trong tiêu đề. Hơn nữa, các giá trị khác nhau cho các tiêu đề này được trình bày trong bảng

    Phần kết luận

    Dữ liệu JSON được chuyển đổi thành bảng HTML bằng cách sử dụng JavaScript/jQuery. jQuery có các tính năng của thư viện JavaScript có thể nhúng vào bất kỳ tệp JavaScript nào. Trong bài đăng này, bạn đã học cách chuyển đổi dữ liệu JSON sang bảng HTML bằng JavaScript/jQuery. Dữ liệu JSON được cấu trúc theo cách mà các khóa trong dữ liệu JSON được chuyển đổi thành tiêu đề của bảng và các giá trị trong dữ liệu JSON được chuyển đổi thành các mục trong bảng

    JSON có thể được chuyển đổi thành HTML không?

    Các nhà phát triển Java có thể dễ dàng chuyển đổi tệp JSON thành HTML chỉ bằng một vài dòng mã .

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

    Để hiển thị dữ liệu JSON trong danh sách, chúng tôi sẽ tạo các phần tử HTML động và chèn dữ liệu vào đó . Các phần tử chúng ta cần tạo ở đây là ul và li. 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 sinh viên đầu tiên chúng ta phải sử dụng dữ liệu.

    Làm cách nào để chuyển đổi dữ liệu JSON thành HTML?

    Chuyển đổi bảng JSON sang HTML .
    Bước 1. Chọn đầu vào của bạn. Tùy chọn 1 - Chọn Mã hóa tệp JSON. Tùy chọn 2 - Nhập URL. .
    Bước 2. Chọn tùy chọn đầu ra (tùy chọn) Dấu tách trường đầu ra. , ;. Quán ba-. Tab Khác-Chọn. Bao gồm tiêu đề trong hàng đầu tiên. .
    Bước 3. Tạo đầu ra. Dữ liệu kết quả. Lưu kết quả của bạn. . htm Tải xuống kết quả EOL

    Làm cách nào để chuyển đổi mảng JSON thành bảng HTML?

    Cách tiếp cận 1. .
    Lấy đối tượng JSON trong một biến
    Call a function which first adds the column names to the < table > element. (It is looking for the all columns, which is UNION of the column names)..
    Duyệt qua dữ liệu JSON và khớp khóa với tên cột. .
    Để trống cột nếu không có giá trị của khóa đó