แสดง JSON เป็น HTML [ปิด]

178

ปิด. คำถามนี้เป็นคำถามปิดหัวข้อ ไม่ยอมรับคำตอบในขณะนี้

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow

ปิดให้บริการใน7 ปีที่ผ่านมา

คำแนะนำเกี่ยวกับวิธีการฝัง JSON ในหน้า HTML ที่มีการจัดรูปแบบ JSON ในรูปแบบที่มนุษย์อ่านได้? ตัวอย่างเช่นเมื่อคุณดู XML ในเบราว์เซอร์เบราว์เซอร์ส่วนใหญ่จะแสดงรูปแบบ XML (เยื้องการแบ่งบรรทัดที่เหมาะสม ฯลฯ ) ฉันต้องการผลลัพธ์สุดท้ายสำหรับ JSON

การเน้นสีไวยากรณ์จะเป็นโบนัส

ขอบคุณ

html json

— จอห์น Muchow
แหล่งที่มา

tohtml.com/javaPropertiesทำงานได้ดีสำหรับฉัน มันทำให้สไตล์ "inline"; มีประโยชน์มากสำหรับการคัดลอกและวางอย่างง่ายในสิ่งอื่น

— Andrew Bucklin

ตรวจสอบห้องสมุดของฉันazimi.me/json-formatter-js

— Mohsen

147

คุณสามารถใช้ฟังก์ชัน JSON.stringify กับ JSON ที่ไม่ได้ฟอร์แมต มันออกมาในรูปแบบที่จัดรูปแบบ

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

สิ่งนี้จะเปลี่ยน

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

เข้าไป

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

ตอนนี้ข้อมูลเป็นรูปแบบที่สามารถอ่านได้คุณสามารถใช้สคริปต์ Prettify ของ Google Codeตามที่ @A แนะนำ เรียกเก็บรหัสสีได้

เป็นมูลค่าเพิ่มว่าIE7 และเบราว์เซอร์รุ่นเก่าไม่สนับสนุนวิธีการ

— จอห์น
แหล่งที่มา

4

สำหรับเบราว์เซอร์ที่ไม่รองรับ JSON.stringify (ลองออกมาแล้วบอกว่า IE เก่า) มีโพลีฟิลที่ยอดเยี่ยมที่คุณสามารถใช้เพื่อรับฟังก์ชั่นการทำงาน ( json.org/js.html ) เพียงแค่ใส่มันและคุณจะได้รับความคุ้มครองทุกที่

— John Munsch

1

เคล็ดลับอีกอย่างคือถ้าคุณใส่ <br> แทนที่เขตข้อมูลเยื้อง (4) คุณจะได้รับตัวแบ่งบรรทัดที่ดี

— Jonathan

5

คำตอบที่ดีที่สุดทำงานและไม่จำเป็นต้องมีห้องสมุดบุคคลที่สาม

— BlaShadow

1

ฉันใช้สิ่งนี้เพื่อผลที่ยอดเยี่ยมสำหรับกรณีการใช้งานที่ JSON ที่จัดรูปแบบมนุษย์จะต้องแสดงในองค์ประกอบ <textarea> HTML ดูเหมือนว่าจะทำงานได้ดีเพียง

— CSSian

1

ใส่สิ่งนี้ใน <pre และคุณได้ตั้งค่าอย่างน้อยสำหรับการดีบักเมื่อคุณไม่สามารถใช้ console.log ()

— sparklos

94

หากคุณจงใจแสดงให้ผู้ใช้ปลายทางให้ตัดข้อความ JSON ใน<PRE>และ<CODE>แท็กเช่น:

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

มิฉะนั้นผมจะใช้JSON Viewer

— RedFilter
แหล่งที่มา

10

และถ้าสตริงทั้งหมดในบรรทัดเดียว เขาทำให้รูปแบบเป็นอย่างนั้นได้อย่างไร

— geowa4

2

คุณร็อค นี่คือคำตอบที่ง่ายที่สุดสำหรับสิ่งที่เป็นคำถามที่ซับซ้อนมาก - วิธีพิมพ์ python json ใน html ขอบคุณ.

— Marc Cenedella

1

ไม่ทราบว่าวิธีนี้ไม่มี upvotes เพิ่มเติม วิธีแก้ปัญหาที่ง่ายและสะดวก

— anthv123

9

@ geowa4 JSON.stringify(jsonObj, null, ' ')จะตกแต่งด้วย 2 ช่องว่าง ฉันรู้ว่ามันสาย แต่คิดว่าเคล็ดลับนี้จะเป็นประโยชน์

— hIpPy

2

firefox เตือนด้วย: ไซต์ข้างหน้าอาจมีโปรแกรมที่เป็นอันตรายเมื่อคุณเข้าสู่ codeplex.com

— JRichardsz

65

สำหรับการเน้นไวยากรณ์การใช้รหัสเสริมสวย ฉันเชื่อว่านี่คือสิ่งที่ StackOverflow ใช้สำหรับการเน้นโค้ด

ห่อ JSON ที่จัดรูปแบบของคุณในบล็อคโค้ดและให้คลาส "prettyprint" แก่พวกเขา
รวม prettify.js ในหน้าของคุณ
ตรวจสอบให้แน่ใจว่าแท็กร่างกายของเอกสารของคุณเรียกใช้prettyPrint()เมื่อโหลด

คุณจะได้เน้นไวยากรณ์ JSON ในรูปแบบที่คุณวางไว้ในหน้าของคุณ ดูตัวอย่างที่นี่ ดังนั้นหากคุณมีรหัสบล็อกเช่นนี้:

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

มันจะมีลักษณะเช่นนี้:

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

สิ่งนี้ไม่ได้ช่วยในการเยื้อง แต่คำตอบอื่น ๆดูเหมือนจะตอบคำถามนั้น

— A. เลวี
แหล่งที่มา

1

ตอนนี้ที่เก็บ Google Code ทั้งหมดถูกตรึงไว้เราควรจะนำผู้ใช้ใหม่ไปยัง GitHub repo ใหม่โดยตรง: https://github.com/google/code-prettify

— adelriosantiago

คุณจะทำให้มันทำงานใน AJAX คืนได้อย่างไร? รหัสไม่ได้มีที่โหลดร่างกาย แต่หลังจากโทร ajax

— toddmo

@toddmo คุณควรทำตาม 3 ขั้นตอนในฟังก์ชันตัวจัดการการตอบกลับสำหรับ AJAX return ดังนั้นตัวจัดการจะเรียกใช้ prettyPrint แทนวิธี body onLoad ฉันคาดหวังว่าจะได้ผล

— A. Levy

คำตอบของ Janus Troelsen ล้มลงและทำงานได้ดังนั้นฉันจึงไปกับสิ่งนั้น คุณควรตรวจสอบ PHP-> HTML ง่าย ๆ

— toddmo

40

ฉันคิดว่าคุณหมายถึงอะไรเช่นนี้: JSON Visualization

ไม่ทราบว่าคุณอาจใช้หรือไม่ แต่คุณอาจถามผู้แต่ง

— Peter Örneholm
แหล่งที่มา

ไม่จริง! ที่ดี! ฉันไม่รู้จะพูดอะไรดี ... ขอบคุณมาก

— fdrv

เป็นเครื่องมือที่ดีจริงๆ!

— David Lilljegren

29

อะไรแบบนี้ ??

สวย JSON

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

ตัวอย่างสด:

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

— warfares
แหล่งที่มา

5

ต่อไปนี้เป็นโซลูชันที่มีน้ำหนักเบาทำในสิ่งที่ OP ต้องการเท่านั้นรวมถึงการเน้น แต่ไม่มีอะไร: ฉันจะพิมพ์ JSON โดยใช้ JavaScript ได้อย่างไร

— Janus Troelsen
แหล่งที่มา

ฟังก์ชั่นที่เหนือกว่าและไม่ใช่แค่สำหรับฉันหากคุณต้องการเพียงแค่ PHP -> HTML และนี่คือสาเหตุ: มันมีน้ำหนักเบามากวิธีที่ง่ายกว่าการใช้ของ Google วิธีที่เล็กกว่าและไม่ต้องเชื่อถือ บริษัท ขนาดใหญ่ . คุณสามารถดูรหัสและเข้าใจได้จริง

— toddmo

3

สามารถใช้ JSON2HTML เพื่อแปลงเป็นรายการ HTML ที่มีรูปแบบสวยงาม .. อาจมีประสิทธิภาพมากกว่าที่คุณต้องการเล็กน้อย

http://json2html.com

— ชาด
แหล่งที่มา

1

ขออภัยดูเหมือนว่าไซต์ปลั๊กอิน jquery หายไปแล้ว bye-bye .. ลองjson2html.com

— Chad Brown

ลองของฉัน: github.com/viscocent/JSON2HTMLสำหรับปัญหาที่ง่ายกว่า

— Viscocent

ฉันคิดว่าฉันจะอัปเดตสิ่งนี้ด้วยเครื่องมือvisualizer visualizer.json2html.com

— Chad Brown

1

SyntaxHighlighterเป็นปากกาเน้นข้อความในตัวที่ทำงานได้อย่างสมบูรณ์ซึ่งพัฒนาขึ้นใน JavaScript หากต้องการทราบว่า SyntaxHighlighter มีความสามารถอะไรให้ดูที่หน้าตัวอย่าง

— themihai
แหล่งที่มา

0

หากคุณเพียงแค่ต้องการทำสิ่งนี้จากจุดตรวจแก้จุดบกพร่องคุณสามารถใช้ปลั๊กอิน Firefox เช่นJSONovichเพื่อดูเนื้อหา JSON

Firefox รุ่นใหม่ที่มีอยู่ในรุ่นเบต้านั้นมีกำหนดจะสนับสนุนสิ่งนี้ (เหมือน XML)

— AvatarKava
แหล่งที่มา

0

นี่คือเครื่องมือ javasript ที่จะแปลง JSON เป็น XML และในทางกลับกันซึ่งควรปรับปรุงความสามารถในการอ่าน จากนั้นคุณสามารถสร้างสไตล์ชีตเพื่อกำหนดสีหรือแปลงเป็น HTML ให้สมบูรณ์

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

— เวย์นฮาร์ทแมน
แหล่งที่มา

0

ทางออกที่ดีที่สุดของคุณกำลังจะใช้เครื่องมือของภาษาแบ็กเอนด์สำหรับสิ่งนี้ คุณใช้ภาษาอะไร สำหรับ Ruby ลองjson_printer

— rfunduk
แหล่งที่มา

-2

อันดับแรกให้ใช้สตริง JSON และสร้างวัตถุจริงจากมัน วนซ้ำแม้ว่าคุณสมบัติทั้งหมดของวัตถุจะวางรายการในรายการที่ไม่ได้เรียงลำดับ ทุกครั้งที่คุณไปยังวัตถุใหม่สร้างรายการใหม่

— geowa4
แหล่งที่มา