Tampilkan JSON sebagai HTML [ditutup]

178

Adakah rekomendasi tentang cara menyematkan JSON di halaman HTML dengan JSON diformat dalam gaya yang dapat dibaca manusia? Misalnya, ketika Anda melihat XML di browser, sebagian besar browser menampilkan XML yang diformat (indentasi, jeda baris yang tepat, dll). Saya ingin hasil akhir yang sama untuk JSON.

Menyoroti sintaks warna akan menjadi bonus.

Terima kasih

html json John Muchow
sumber
tohtml.com/javaProperties bekerja dengan baik untuk saya; itu membuat gaya "inline"; sangat membantu untuk copy-paste sederhana menjadi sesuatu yang lain.
Andrew Bucklin
Lihatlah perpustakaan saya azimi.me/json-formatter-js
Mohsen

Jawaban:

147

Anda dapat menggunakan fungsi JSON.stringify dengan JSON yang tidak diformat. Ini output dengan cara yang diformat.

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

Ini berubah

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

ke

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

Sekarang data adalah format yang dapat dibaca, Anda dapat menggunakan skrip Prettify Google Code seperti yang disarankan oleh @A. Retribusi untuk kode warna itu.

Perlu ditambahkan bahwa IE7 dan browser yang lebih lama tidak mendukung metode JSON.stringify .

John
sumber
4
Untuk browser yang tidak mendukung JSON.stringify (mari kita keluar dan mengatakannya, IE lama) ada polyfill yang sangat baik yang dapat Anda gunakan untuk mendapatkan fungsionalitas ( json.org/js.html ). Cukup sertakan itu dan Anda akan dibahas di mana-mana.
John Munsch
1
Trik lain adalah jika Anda memasukkan Situs alih-alih bidang indentasi (4), Anda akan mendapatkan jeda baris yang bagus
Jonathan
5
jawaban terbaik, lakukan pekerjaan itu dan tidak perlu menyertakan perpustakaan pihak ketiga.
BlaShadow
1
Saya menggunakan ini untuk efek yang besar untuk kasus penggunaan di mana JSON yang diformat manusia harus ditampilkan dalam elemen HTML <textarea>. Tampaknya melakukan pekerjaan dengan baik.
CSSian
1
Letakkan ini di <pre. dan Anda siap, setidaknya untuk keperluan debugging, ketika Anda tidak dapat menggunakan console.log ()
sparklos
93

Jika Anda sengaja menampilkannya untuk pengguna akhir, masukkan teks JSON <PRE>dan <CODE>tag, misalnya:

<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>

Kalau tidak, saya akan menggunakan JSON Viewer .

RedFilter
sumber
10
dan bagaimana jika string semuanya dalam satu baris? bagaimana dia membuatnya diformat dengan baik seperti itu?
geowa4
2
Kamu keren. Ini adalah jawaban paling sederhana untuk pertanyaan yang sangat rumit - bagaimana cara mencetak python json dalam html. Terima kasih.
Marc Cenedella
1
Tidak tahu bagaimana ini tidak memiliki lebih banyak upvotes. Sederhana, solusi mudah.
anthv123
9
@ geowa4, JSON.stringify(jsonObj, null, ' ')akan mempercantiknya dengan 2 spasi. Saya tahu ini terlambat tetapi saya pikir tip ini akan sangat membantu.
hIpPy
2
firefox memperingatkan: Situs di depan mungkin berisi program berbahaya ketika Anda masuk ke codeplex.com
JRichardsz
65

Untuk penyorotan sintaksis, gunakan kode prettify . Saya percaya inilah yang digunakan StackOverflow untuk menyoroti kode-nya.

  1. Bungkus JSON Anda yang telah diformat dalam blok kode dan beri mereka kelas "prettyprint".
  2. Sertakan prettify.js di halaman Anda.
  3. Pastikan tag tubuh dokumen Anda memanggil prettyPrint()saat dimuat

Anda akan memiliki sintaks yang disorot JSON dalam format yang telah Anda susun di halaman Anda. Lihat di sini untuk contoh . Jadi jika Anda memiliki blok kode seperti ini:

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

Akan terlihat seperti ini:

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

Ini tidak membantu dengan indentasi, tetapi jawaban lain sepertinya mengatasinya.

A. Retribusi
sumber
1
Sekarang setelah semua repositori Google Code dibekukan, kita harus mengarahkan pengguna baru secara langsung ke repo GitHub baru: https://github.com/google/code-prettify
adelriosantiago
Bagaimana Anda bisa membuatnya bekerja dalam pengembalian AJAX? Kode tidak ada di sana pada beban tubuh, tetapi hanya setelah panggilan ajax.
toddmo
@toddmo Anda harus dapat mengikuti 3 langkah saya di fungsi penangan respons untuk pengembalian AJAX. Jadi pawang akan memanggil prettyPrint alih-alih metode onLoad tubuh. Saya berharap itu akan berhasil.
A. Levy
Jawaban Janus Troelsen jatuh dan hanya bekerja, jadi saya setuju. Anda harus memeriksanya untuk PHP-> HTML, sangat mudah.
toddmo
40

Saya pikir Anda berarti sesuatu seperti ini: Visualisasi JSON

Tidak tahu apakah Anda mungkin menggunakannya, tetapi Anda mungkin bertanya kepada penulis.

Peter Örneholm
sumber
Tidak nyata! Bagus! Saya tidak tahu harus berkata apa ... terima kasih banyak
fdrv
Benar-benar alat yang bagus!
David Lilljegren
5

Ini solusi ringan, hanya melakukan apa yang diminta OP, termasuk menyoroti tetapi tidak ada yang lain: Bagaimana saya bisa mencetak JSON dengan menggunakan JavaScript?

Janus Troelsen
sumber
fungsi superior, dan bukan hanya untuk saya, jika semua yang Anda ingin lakukan adalah PHP -> HTML, dan inilah alasannya: Ini sangat ringan, jauh lebih sederhana daripada Google untuk digunakan, jauh lebih kecil, dan tidak perlu mempercayai perusahaan besar . Anda benar-benar dapat melihat kode dan memahaminya.
toddmo
1

SyntaxHighlighter adalah kode mandiri sintaks yang berfungsi penuh yang dikembangkan dalam JavaScript. Untuk mendapatkan gambaran tentang kemampuan SyntaxHighlighter, lihathalaman demo .

themihai
sumber
0

Jika Anda hanya ingin melakukan ini dari sudut pandang debugging, Anda dapat menggunakan plugin Firefox seperti JSONovich untuk melihat konten JSON.

Versi baru Firefox yang saat ini dalam versi beta dijadwalkan untuk mendukungnya (seperti XML)

AvatarKava
sumber
0

Taruhan terbaik Anda akan menggunakan alat bahasa back-end Anda untuk ini. Bahasa apa yang Anda gunakan? Untuk Ruby, coba json_printer .

rfunduk
sumber
-2

Pertama ambil string JSON dan buat objek nyata darinya. Ulangi semua properti objek, letakkan item dalam daftar tanpa urutan. Setiap kali Anda sampai ke objek baru, buat daftar baru.

geowa4
sumber