JSON'u HTML olarak görüntüle [kapalı]

178

JSON, insan tarafından okunabilir bir tarzda biçimlendirilmiş JSON ile bir HTML sayfasına nasıl yerleştirileceğine dair herhangi bir öneriniz var mı? Örneğin, XML'i bir tarayıcıda görüntülediğinizde, çoğu tarayıcı XML biçiminde (girintili, doğru satır sonları vb.) Görüntüler. JSON için de aynı sonucu istiyorum.

Renk sözdizimi vurgulama bir bonus olacaktır.

Teşekkürler

html json

— John Muchow
kaynak

tohtml.com/javaProperties benim için iyi çalıştı; stili "satır içi" yapar; başka bir şeye basit kopyala ve yapıştır için çok yararlı.

— Andrew Bucklin

Kütüphanemi kontrol et azimi.me/json-formatter-js

— Mohsen

147

Biçimlendirilmemiş JSON ile JSON.stringify işlevini kullanabilirsiniz. Biçimlendirilmiş bir şekilde çıktılar.

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

Bu döner

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

içine

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

Artık veriler okunabilir bir biçimdir ve @A tarafından önerilen Google Code Prettify komut dosyasını kullanabilirsiniz. Renk kodlamak için levy.

IE7 ve daha eski tarayıcıların JSON.stringify yöntemini desteklemediğini eklemeye değer .

— John
kaynak

4

JSON.stringify'ı desteklemeyen tarayıcılar için (sadece çıkıp diyelim ki eski IE), işlevselliği elde etmek için kullanabileceğiniz mükemmel bir çoklu dolgu var ( json.org/js.html ). Sadece ekleyin ve hemen hemen her yerde kapsanacaksınız.

— John Munsch

1

başka bir hile, girinti alanı (4) yerine bir <br> koyarsanız, güzel satır sonları alırsınız

— Jonathan

5

en iyi yanıt, işi yapın ve üçüncü taraf kitaplığı içermenize gerek yoktur.

— BlaShadow

1

Bunu, insan biçimlendirilmiş JSON'un bir HTML <textarea> öğesinde görüntülenmesi gereken bir kullanım durumu için büyük bir etki için kullandım. İşi harika gördü.

— CSSian

1

Bunu <pre. ve en azından hata ayıklama amacıyla, console.log () kullanamayacağınız zaman

— hazırsınız

94

Son kullanıcı için kasten görüntülüyorsanız, JSON metnini <PRE>ve <CODE>etiketlerini sarın , örneğin:

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

Aksi takdirde JSON Viewer'ı kullanırdım .

— RedFilter
kaynak

10

ve dize hepsi bir satırdaysa ne olacak? nasıl böyle güzel biçimlendirilmiş yapar?

— geowa4

2

Harikasın. Bu çok karmaşık bir soru ne basit bir cevaptır - html içinde python json güzel yazdırmak için nasıl. teşekkür ederim.

— Marc Cenedella

1

Bunun nasıl daha fazla oyu olmadığını bilmiyorum. Basit, kolay çözüm.

— anthv123

9

@ geowa4, JSON.stringify(jsonObj, null, ' ')2 boşlukla güzelleştirecek. Bu geç olduğunu biliyorum ama bu ipucu yararlı olacağını düşündüm.

— hIpPy

2

firefox ile uyarıyor:

— codeplex.com'a

65

Sözdizimi vurgulaması için kod güzelliğini kullanın . Bu StackOverflow kod vurgulama için ne kullanır inanıyorum.

Biçimlendirilmiş JSON'unuzu kod bloklarına sarın ve onlara "prettyprint" sınıfını verin.
Sayfanıza prettify.js dosyasını ekleyin.
Emin belgenin vücut etiketi görüşmeleri yapma prettyPrint()ne zaman yükler

Sayfanızda belirlediğiniz biçimde sözdizimi vurgulanmış JSON'a sahip olursunuz. Bir örnek için buraya bakın . Eğer böyle bir kod bloğunuz varsa:

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

Şöyle görünecektir:

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

Bu, girintiliğe yardımcı olmaz, ancak diğer cevaplar bunu ele alıyor gibi görünüyor.

— A. Levy
kaynak

1

Artık tüm Google Kod depoları donduğu için yeni kullanıcıları doğrudan yeni GitHub

— repo'suna yönlendirmeliyiz

Bunu AJAX dönüşü içinde nasıl çalıştırabilirsiniz? Kod vücut yükünde değil, sadece ajax çağrısından sonra.

— toddmo

@toddmo, AJAX dönüşü için yanıt işleyicisi işlevindeki 3 adımımı izleyebilmeniz gerekir. Böylece işleyici, gövde onLoad yöntemi yerine prettyPrint'i çağırır. Bunun işe yaramasını bekliyorum.

— A. Levy

Janus Troelsen'in yanıtı düştü ve işe yaradı, ben de bununla gittim. PHP-> HTML için kontrol etmelisiniz, çok kolay.

— toddmo

40

Sanırım şöyle bir şey demek istedin : JSON Visualization

Kullanıp kullanamayacağınızı bilmiyorum, ancak yazara sorabilirsiniz.

— Peter Örneholm
kaynak

Unreal! Harika! Ne diyeceğimi bilmiyorum ... çok teşekkür ederim

— fdrv

Gerçekten güzel bir araç!

— David Lilljegren

29

böyle bir şey ??

Oldukça-json

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

canlı örnek:

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

— warfares
kaynak

5

Vurgulama da dahil olmak üzere yalnızca OP'nin sorduğu hafif bir çözüm: Başka bir şey yok: JSON'u JavaScript kullanarak nasıl güzel yazdırabilirim?

— Janus Troelsen
kaynak

üstün bir işlev ve sadece benim için değil, tek yapmak istediğiniz PHP -> HTML ise ve işte nedeni: Çok hafif, kullanımı Google'dan çok daha basit, çok daha küçük ve bir mega şirkete güvenmeyi gerektirmiyor . Aslında koda bakıp anlayabilirsiniz.

— toddmo

3

Güzel biçimlendirilmiş HTML listesine dönüştürmek için JSON2HTML kullanabilirsiniz .. Gereksinim duyduğunuzdan biraz daha güçlü olabilir

http://json2html.com

— Çad
kaynak

1

üzgünüm jquery eklenti sitesi güle güle gitti gibi görünüyor .. deneyin json2html.com

— Chad Brown

benimkini deneyin: daha basit sorunlar için github.com/viscocent/JSON2HTML

— Viscocent

Bunu görselleştirme aracı visualizer.json2html.com

— Chad Brown

1

SyntaxHighlighter , JavaScript'te geliştirilen tamamen işlevsel, bağımsız bir kod sözdizimi vurgulayıcıdır. SyntaxHighlighter'nın neler yapabileceği hakkında fikir edinmek için demo sayfasınabir göz atın.

— themihai
kaynak

0

Bunu sadece hata ayıklama açısından yapmak istiyorsanız, JSONovich gibi bir Firefox eklentisi kullanabilirsiniz , JSON içeriğini görüntülemek için .

Firefox'un şu anda beta sürümündeki yeni sürümü, yerel olarak bunu destekleyecek şekilde planlandı (XML gibi)

— AvatarKava
kaynak

0

İşte JSON'u XML'e dönüştürecek ve okunabilirliğini artıracak bir tersi olan javasript aracı. Daha sonra renklendirmek için bir stil sayfası oluşturabilir veya HTML'ye tam bir dönüşüm yapabilirsiniz.

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

— Wayne Hartman
kaynak

0

En iyi seçiminiz bunun için arka uç dilinizin araçlarını kullanmak olacaktır. Hangi dili kullanıyorsun Ruby için json_printer'ı deneyin .

— rfunduk
kaynak

-2

Önce JSON dizesini alın ve gerçek nesneleri çıkarın. Öğeleri sırasız bir listeye yerleştirerek, nesnenin tüm özelliklerine rağmen döngü yapın. Yeni bir nesneye her ulaştığınızda yeni bir liste yapın.

— geowa4
kaynak