HTML के रूप में JSON प्रदर्शित करें [बंद]

178

बन्द है। यह सवाल ऑफ टॉपिक है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? सवाल को अपडेट करें ताकि यह स्टैक ओवरफ्लो के लिए विषय पर हो ।

7 साल पहले बंद हुआ ।

JSON के साथ HTML पृष्ठ में JSON एम्बेड करने के तरीके के बारे में कोई सिफारिशें मानव पठनीय शैली में स्वरूपित हैं? उदाहरण के लिए, जब आप किसी ब्राउज़र में XML देखते हैं, तो अधिकांश ब्राउज़र XML स्वरूपित (इंडेंट, उचित लाइन ब्रेक आदि) प्रदर्शित करते हैं। मुझे JSON के लिए एक ही अंतिम परिणाम चाहिए।

रंग वाक्य रचना हाइलाइटिंग एक बोनस होगा।

धन्यवाद

html json

— जॉन मुचोव
स्रोत

tohtml.com/javaProperties ने मेरे लिए अच्छा काम किया; यह शैली को "इनलाइन" बनाता है; सरल कॉपी-और-पेस्ट में कुछ और के लिए बहुत उपयोगी है।

— एंड्रयू बकलिन

मेरी लाइब्रेरी देखें azimi.me/json-formatter-js

— मोहसिन

147

आप अनजाने JSON के साथ JSON.stringify फ़ंक्शन का उपयोग कर सकते हैं। यह इसे स्वरूपित तरीके से आउटपुट करता है।

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

यह बदल जाता है

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

में

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

अब डेटा एक पठनीय प्रारूप है जिसका उपयोग आप Google कोड Prettify स्क्रिप्ट का उपयोग कर सकते हैं जैसा कि @A द्वारा सुझाया गया है। लेवी कलर कोड के लिए।

यह जोड़ने योग्य है कि IE7 और पुराने ब्राउज़र JSON.stringify विधि का समर्थन नहीं करते हैं ।

— जॉन
स्रोत

4

ब्राउज़र के लिए जो JSON.stringify का समर्थन नहीं करते हैं (चलो बस बाहर आते हैं और कहते हैं, पुराने IE) एक उत्कृष्ट पॉलीफिल है जिसे आप कार्यक्षमता ( json.org/js.html ) प्राप्त करने के लिए उपयोग कर सकते हैं । बस इसमें शामिल हैं और आपको हर जगह बहुत कवर किया जाएगा।

— जॉन मुंसच

1

एक और चाल है, अगर आप इंडेंट फील्ड (4) के बजाय एक <br> डालते हैं, तो आपको अच्छी लाइन ब्रेक मिलेगी

— जोनाथन

5

सबसे अच्छा जवाब, नौकरी करें और तीसरे पक्ष के पुस्तकालय को शामिल करने की आवश्यकता नहीं है।

— BlaShadow

1

मैंने इसका उपयोग एक ऐसे उपयोग के मामले के लिए किया जहां मानव स्वरूपित JSON को HTML <textarea> तत्व में प्रदर्शित किया जाना था। लगता है कि काम बहुत अच्छा है।

— सेडियन जूल

1

इसे <प्री में रखें। और आप कम से कम डिबगिंग उद्देश्यों के लिए सेट हैं, जब आप

— कंसोल का

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 व्यूअर का उपयोग करता ।

— RedFilter
स्रोत

10

और क्या होगा अगर स्ट्रिंग एक पंक्ति में है? कैसे वह इसे अच्छी तरह से स्वरूपित करता है?

— जियोवा 4

2

आपने धमाल मचाया। यह एक बहुत ही जटिल प्रश्न है कि html में python json को कैसे प्रिंट किया जाए, इसका सबसे सरल उत्तर है। धन्यवाद।

— मार्क सेंडेला

1

पता नहीं कैसे यह अधिक upvotes नहीं है। सरल, आसान उपाय।

— anthv123

9

@ geowa4, JSON.stringify(jsonObj, null, ' ')इसे 2 स्थानों के साथ सुशोभित करेगा। मुझे पता है कि यह देर हो चुकी है लेकिन लगा कि यह टिप मददगार होगी।

— hIpPy

2

फ़ायरफ़ॉक्स के साथ चेतावनी देता है: जब आप codeplex.com में प्रवेश करते हैं तो साइट में हानिकारक कार्यक्रम शामिल हो सकते हैं

— JRichardsz

65

सिंटैक्स हाइलाइटिंग के लिए, कोड प्रीटेट का उपयोग करें । मेरा मानना है कि यह वही है जो StackOverflow अपने कोड हाइलाइटिंग के लिए उपयोग करता है।

अपने ब्लॉक किए गए JSON को कोड ब्लॉक में लपेटें और उन्हें "प्रीटिप्रिंट" क्लास दें।
अपने पृष्ठ में 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

अब

— चूंकि

आप AJAX रिटर्न के भीतर काम करने के लिए इसे कैसे प्राप्त कर सकते हैं? कोड बॉडी लोड पर नहीं है, लेकिन केवल अजाक्स कॉल के बाद।

— टोडरमो

@toddmo आपको AJAX रिटर्न के लिए प्रतिक्रिया हैंडलर फ़ंक्शन में मेरे 3 चरणों का पालन करने में सक्षम होना चाहिए। तो हैंडलर शरीर onLad विधि के बजाय prettyPrint को कॉल करेगा। मुझे उम्मीद है कि काम करना चाहिए।

— ए। लेवी

जानूस ट्रॉल्सन का जवाब गिर गया और बस काम किया, इसलिए मैं उसके साथ गया। आपको इसे PHP-> HTML के लिए जांचना चाहिए, इतना आसान है।

— टोडरमो

40

मुझे लगता है कि आपका मतलब कुछ इस तरह था: JSON विज़ुअलाइज़ेशन

यदि आप इसका उपयोग कर सकते हैं तो नहीं जानते, लेकिन आप लेखक से पूछ सकते हैं।

— पीटर Örneholm
स्रोत

अवास्तविक! महान! मैं नहीं जानता कि क्या कहना है ... बहुत बहुत धन्यवाद

— fdrv

वास्तव में एक अच्छा उपकरण!

— डेविड लिलजेग्रेन ने

29

कुछ इस तरह ??

सुंदर-json

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

लाइव नमूना:

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

— warfares
स्रोत

5

यहाँ एक लाइट-वेट सॉल्यूशन है, जिसमें केवल ओपी से पूछा गया है, जिसमें हाइलाइटिंग के अलावा और कुछ नहीं: मैं जावास्क्रिप्ट का उपयोग करके JSON को कैसे प्रिंट कर सकता हूं?

— जानूस ट्रॉल्सन
स्रोत

एक बेहतर कार्य, और न केवल मेरे लिए, यदि आप सभी करना चाहते हैं PHP -> HTML, और यहाँ क्यों है: यह बहुत हल्का है, उपयोग करने के लिए Google की तुलना में अधिक सरल है, छोटे तरीके से, और एक मेगा कंपनी पर भरोसा करने की आवश्यकता नहीं है । आप वास्तव में कोड को देख सकते हैं और इसे समझ सकते हैं।

— टोडरमो

3

JSON2HTML का उपयोग इसे अच्छी तरह से स्वरूपित HTML सूची में बदलने के लिए कर सकता है .. हालांकि आप वास्तव में ज़रूरत से थोड़ा अधिक शक्तिशाली हो सकते हैं

http://json2html.com

— काग़ज़ का टुकड़ा
स्रोत

1

सॉरी लग रहा है जैसे jquery प्लग-इन साइट बाय-बाय हो गई है .. try json2html.com

— Chad Brown

मेरी कोशिश करो: github.com/viscocent/JSON2HTML सरल समस्याओं के लिए

— विस्कॉन्सिन

मुझे लगा कि मैं इसे विज़ुअलाइज़र टूल visualizer.json2html.com

— चाड ब्राउन

1

SyntaxHighlighter जावास्क्रिप्ट में विकसित एक पूरी तरह कार्यात्मक स्व-निहित कोड सिंटैक्स हाइलाइटर है। SyntaxHighlighter क्या सक्षम है, इसका अंदाजा लगाने के लिए डेमो पेजपर एक नजर डालें।

— themihai
स्रोत

0

यदि आप डिबगिंग दृष्टिकोण से ऐसा करना चाहते हैं, तो आप JSON कंटेंट को देखने के लिए JSONovich जैसे फ़ायरफ़ॉक्स प्लगइन का उपयोग कर सकते हैं ।

फ़ायरफ़ॉक्स का नया संस्करण जो अभी बीटा में है, उसे मूल रूप से समर्थन के लिए स्लेट किया गया है (बहुत हद तक XML की तरह)

— AvatarKava
स्रोत

0

यहाँ एक जावास्क्रिप्ट उपकरण है जो JSON को XML में बदल देगा और इसके विपरीत, जो इसकी पठनीयता को बढ़ाएगा। फिर आप इसे रंग करने के लिए एक स्टाइल शीट बना सकते हैं या HTML में एक पूर्ण रूपान्तरण कर सकते हैं।

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

— वेन हार्टमैन
स्रोत

0

आपकी सर्वश्रेष्ठ शर्त इसके लिए आपकी बैक-एंड भाषा के टूल का उपयोग करने वाली है। आप किस भाषा का उपयोग कर रहे हैं? रूबी के लिए, json_printer का प्रयास करें ।

— rfunduk
स्रोत

-2

सबसे पहले JSON स्ट्रिंग लें और उसमें से वास्तविक वस्तुएं बनाएं । लूप हालांकि ऑब्जेक्ट के सभी गुण, वस्तुओं को एक अनियंत्रित सूची में रखना। हर बार जब आप किसी नई वस्तु पर जाते हैं, तो एक नई सूची बनाते हैं।

— geowa4
स्रोत