Hiển thị JSON dưới dạng HTML [đã đóng]

178

Bạn có đề xuất nào về cách nhúng JSON trong trang HTML với JSON được định dạng theo kiểu có thể đọc được không? Ví dụ: khi bạn xem XML trong trình duyệt, hầu hết các trình duyệt sẽ hiển thị XML được định dạng (thụt dòng, ngắt dòng thích hợp, v.v.). Tôi muốn kết quả cuối cùng tương tự cho JSON.

Làm nổi bật cú pháp màu sẽ là một phần thưởng.

Cảm ơn

html json

— John Manyow
nguồn

tohtml.com/javaProperies hoạt động tốt cho tôi; nó làm cho phong cách "nội tuyến"; rất hữu ích cho việc sao chép và dán đơn giản vào một cái gì đó khác.

— Andrew Bucklin

Kiểm tra thư viện của tôi azimi.me/json-formatter-js

— Mohsen

147

Bạn có thể sử dụng hàm JSON.opesify với JSON chưa được định dạng. Nó xuất ra nó một cách định dạng.

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

Lần lượt này

{ "foo": "sample", "bar": "sample" }

vào

 {
     "foo": "sample", 
     "bar": "sample" 
 }

Bây giờ dữ liệu là định dạng có thể đọc được, bạn có thể sử dụng tập lệnh Google Code Prettify theo đề xuất của @A. Levy để mã màu nó.

Điều đáng nói là IE7 và các trình duyệt cũ hơn không hỗ trợ phương thức JSON.opesify .

— John
nguồn

4

Đối với các trình duyệt không hỗ trợ JSON.opesify (hãy xuất hiện và nói nó, IE cũ) có một polyfill tuyệt vời mà bạn có thể sử dụng để có được chức năng ( json.org/js.html ). Chỉ cần bao gồm điều đó và bạn sẽ được bảo hiểm khá nhiều ở mọi nơi.

— John Munsch

1

một mẹo khác là nếu bạn đặt <br> thay vì trường thụt lề (4), bạn sẽ có được các ngắt dòng đẹp

— Jonathan

5

câu trả lời tốt nhất, thực hiện công việc và không cần bao gồm thư viện của bên thứ ba.

— BlaShadow

1

Tôi đã sử dụng điều này để tạo hiệu ứng tuyệt vời cho trường hợp sử dụng trong đó JSON được định dạng của con người phải được hiển thị trong phần tử <textarea> HTML. Dường như để làm công việc chỉ là tuyệt vời.

— CSSian

1

Đặt cái này vào <pre. và bạn đã thiết lập, ít nhất là cho mục đích gỡ lỗi, khi bạn không thể sử dụng console.log ()

— sparklos

93

Nếu bạn cố tình hiển thị nó cho người dùng cuối, hãy bọc văn bản JSON <PRE>và <CODE>các thẻ, ví dụ:

<html>
<body>
<pre>
<code>
[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

</code>
</pre>
</body>
</html>

Nếu không, tôi sẽ sử dụng Trình xem JSON .

— Bộ lọc đỏ
nguồn

10

và nếu chuỗi là tất cả trong một dòng thì sao? Làm thế nào để anh ta làm cho nó được định dạng độc đáo như vậy?

— geowa4

2

Bạn đá. Đây là câu trả lời đơn giản nhất cho câu hỏi rất phức tạp - làm thế nào để in python json đẹp trong html. cảm ơn bạn.

— Marc Cenedella

1

Không biết làm thế nào điều này không có nhiều upvote. Giải pháp đơn giản, dễ dàng.

— anthv123

9

@ geowa4, JSON.stringify(jsonObj, null, ' ')sẽ làm đẹp nó với 2 không gian. Tôi biết điều này là muộn nhưng nghĩ rằng mẹo này sẽ hữu ích.

— hIpPy

2

firefox cảnh báo với: Trang web phía trước có thể chứa các chương trình có hại khi bạn truy cập vào

— codeplex.com

65

Đối với đánh dấu cú pháp, sử dụng mã prettify . Tôi tin rằng đây là những gì StackOverflow sử dụng để làm nổi bật mã của nó.

Gói JSON được định dạng của bạn trong các khối mã và cung cấp cho chúng lớp "beautifulprint".
Bao gồm prettify.js trong trang của bạn.
Đảm bảo thẻ cơ thể của tài liệu của bạn gọi prettyPrint()khi tải

Bạn sẽ có cú pháp tô sáng JSON theo định dạng bạn đã trình bày trong trang của mình. Xem ở đây cho một ví dụ . Vì vậy, nếu bạn có một khối mã như thế này:

<code class="prettyprint">
    var jsonObj = {
        "height" : 6.2,
        "width" : 7.3,
        "length" : 9.1,
        "color" : {
            "r" : 255,
            "g" : 200,
            "b" : 10
        }
    }
</code>

Nó sẽ trông như thế này:

var jsonObj = {
    "height" : 6.2,
    "width" : 7.3,
    "length" : 9.1,
    "color" : {
        "r" : 255,
        "g" : 200,
        "b" : 10
    }
}

Điều này không giúp ích cho việc thụt lề, nhưng các câu trả lời khác dường như đang giải quyết điều đó.

— A. Levy
nguồn

1

Bây giờ, tất cả các kho lưu trữ Google Code đã bị đóng băng, chúng tôi nên hướng người dùng mới trực tiếp vào repo GitHub mới: https://github.com/google/code-prettify

— adelriosantiago

Làm thế nào bạn có thể làm cho điều này hoạt động trong lợi nhuận AJAX? Mã không có ở tải cơ thể, nhưng chỉ sau cuộc gọi ajax.

— chập chững

@toddmo bạn sẽ có thể làm theo 3 bước của tôi trong chức năng xử lý phản hồi để trả về AJAX. Vì vậy, trình xử lý sẽ gọi PrettyPrint thay vì phương thức onLoad. Tôi hy vọng rằng sẽ làm việc.

— A. Levy

Câu trả lời của Janus Troelsen rơi vào và chỉ hoạt động, vì vậy tôi đã làm theo. Bạn nên kiểm tra nó cho PHP-> HTML, thật dễ dàng.

— chập chững

40

Tôi nghĩ bạn có ý nghĩa như thế này: Trực quan hóa JSON

Không biết bạn có thể sử dụng nó không, nhưng bạn có thể hỏi tác giả.

— Peter rneholm
nguồn

Không có thật! Tuyệt quá! Tôi không biết phải nói gì ... cảm ơn bạn rất nhiều

— fdrv

Thực sự là một công cụ tốt đẹp!

— David Lilljegren

29

một cái gì đó như thế này ??

xinh đẹp

https://github.com/warfares/pretty-json

mẫu sống:

http://warfares.github.com/pretty-json/

— chiến tranh
nguồn

5

Đây là một giải pháp gọn nhẹ, chỉ làm những gì OP yêu cầu, bao gồm làm nổi bật nhưng không có gì khác: Làm cách nào tôi có thể in JSON đẹp bằng JavaScript?

— Janus Troelsen
nguồn

một chức năng ưu việt và không chỉ đối với tôi, nếu tất cả những gì bạn muốn làm là PHP -> HTML và đây là lý do: Nó rất nhẹ, đơn giản hơn Google để sử dụng, nhỏ hơn và không cần phải tin tưởng vào một công ty lớn . Bạn thực sự có thể nhìn vào mã và hiểu nó.

— chập chững

3

Có thể sử dụng JSON2HTML để chuyển đổi nó thành danh sách HTML được định dạng độc đáo .. có thể mạnh hơn một chút so với thực tế bạn cần

http://json2html.com

— Chad
nguồn

1

xin lỗi có vẻ như trang web bổ trợ jquery đã tạm biệt .. hãy thử json2html.com

— Chad Brown

hãy thử của tôi: github.com/viscocent/JSON2HTML để biết các vấn đề đơn giản hơn

— Viscrial

hình tôi muốn cập nhật điều này với công cụ trực quan visualizer.json2html.com

— Chad Brown

1

SyntaxHighlighter là một cú pháp mã tự chứa đầy đủ chức năng được phát triển trong JavaScript. Để có được ý tưởng về những gì SyntaxHighlighter có khả năng, hãy xemtrang demo .

— chủ đề
nguồn

0

Nếu bạn chỉ muốn làm điều này từ quan điểm gỡ lỗi, bạn có thể sử dụng plugin Firefox như JSONovich để xem nội dung JSON.

Phiên bản mới của Firefox hiện đang trong giai đoạn thử nghiệm dự kiến sẽ hỗ trợ điều này (giống như XML)

— AvatarKava
nguồn

0

Đây là một công cụ javasript sẽ chuyển đổi JSON thành XML và ngược lại, giúp tăng cường khả năng đọc của nó. Sau đó, bạn có thể tạo một biểu định kiểu để tô màu cho nó hoặc thực hiện chuyển đổi hoàn toàn sang HTML.

http://www.xml.com/pub/a/2006/05/31/converting-b between-xml-and-json.html

— Wayne Hartman
nguồn

0

Đặt cược tốt nhất của bạn sẽ là sử dụng các công cụ ngôn ngữ phụ trợ của bạn cho việc này. Ngôn ngữ của bạn đang sử dụng là gì? Đối với Ruby, hãy thử json_printer .

— rfunduk
nguồn

-2

Đầu tiên lấy chuỗi JSON và thực hiện các đối tượng thực sự từ nó. Lặp lại mặc dù tất cả các thuộc tính của đối tượng, đặt các mục trong một danh sách không có thứ tự. Mỗi khi bạn đến một đối tượng mới, hãy tạo một danh sách mới.

— geowa4
nguồn