এইচটিএমএল হিসাবে জেএসএন প্রদর্শন করুন [বন্ধ]

178

কোনও মানব পাঠযোগ্য শৈলীতে জেএসএন ফর্ম্যাট করে কোনও এইচটিএমএল পৃষ্ঠায় জেএসএনকে এম্বেড করার বিষয়ে কোনও প্রস্তাবনা? উদাহরণস্বরূপ, আপনি যখন কোনও ব্রাউজারে এক্সএমএল দেখেন, বেশিরভাগ ব্রাউজারগুলি এক্সএমএল ফর্ম্যাট করে (যুক্ত, যথাযথ লাইন বিরতি ইত্যাদি) প্রদর্শন করে। আমি JSON এর জন্য একই শেষ ফলাফল চাই।

রঙিন সিনট্যাক্স হাইলাইট করা একটি বোনাস হবে।

ধন্যবাদ

html  json 
— জন মুচো
সূত্র
tohtml.com/javaProperties আমার জন্য দুর্দান্ত কাজ করেছে; এটি স্টাইলকে "ইনলাইন" করে তোলে; অন্য কিছুতে অনুলিপি করার জন্য খুব সহায়ক।
— অ্যান্ড্রু বাকলিন
আমার লাইব্রেরি আজিমি.মে
— মোহসেন

উত্তর:

147

আপনি ফর্ম্যাট করা JSON এর সাথে JSON.stringify ফাংশনটি ব্যবহার করতে পারেন। এটি এটি ফর্ম্যাট পদ্ধতিতে আউটপুট করে।

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

এই পরিণত হয়

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

মধ্যে

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

এখন ডেটাটি একটি পঠনযোগ্য ফর্ম্যাট যা আপনি @ এ দ্বারা প্রস্তাবিত হিসাবে গুগল কোড প্রিটিফাই স্ক্রিপ্টটি ব্যবহার করতে পারেন । এটির কোড কোড লাগান।

এটি যোগ করার মতো যে আই 7 এবং পুরানো ব্রাউজারগুলি JSON.stringify পদ্ধতি সমর্থন করে না ।

— জন
সূত্র
4
JSON.stringify সমর্থন করে না এমন ব্রাউজারগুলির জন্য (আসুন কেবল আসুন এবং এটি বলুন, ওল্ড আইই) আপনি কার্যকারিতা ( json.org/js.html ) পেতে একটি দুর্দান্ত পলফিল ব্যবহার করতে পারেন । কেবল এটি অন্তর্ভুক্ত করুন এবং আপনি সর্বত্র অনেকটা coveredাকা থাকবেন।
— জন মুন্ছ
1
আরেকটি কৌশলটি হ'ল যদি আপনি ইনডেন্ট ক্ষেত্রের পরিবর্তে একটি অনলাইন রাখেন (4), আপনি দুর্দান্ত লাইন ব্রেক পাবেন
— জোনাথন
5
সেরা উত্তর, কাজ করুন এবং তৃতীয় পক্ষের লাইব্রেরি অন্তর্ভুক্ত করার দরকার নেই।
— ব্লেশডো
1
আমি এটিকে এমন ব্যবহারের ক্ষেত্রে দুর্দান্তভাবে ব্যবহার করেছি যেখানে মানব ফর্ম্যাট করা JSON কে এইচটিএমএল <টেক্সটেকেরে উপাদানটিতে প্রদর্শিত হতে হয়েছিল। কাজটি দুর্দান্ত দেখায় বলে মনে হচ্ছে।
— CSSian
1
এটি <প্রাক> রাখুন। এবং আপনি কমপক্ষে ডিবাগিং উদ্দেশ্যে, আপনি যখন
— কনসোল.লগ
92

আপনি যদি ইচ্ছাকৃতভাবে এটি শেষ ব্যবহারকারীর জন্য প্রদর্শন করে থাকেন, তবে 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>

অন্যথায় আমি জেএসএন ভিউয়ার ব্যবহার করব ।

— RedFilter
সূত্র
10
এবং স্ট্রিং সব এক লাইনে থাকলে কী হবে? সে কীভাবে এটিকে সুন্দরভাবে ফর্ম্যাট করে?
— geowa4
2
আপনি দোলা। এটি একটি খুব জটিল প্রশ্ন যা ছিল তার সহজ উত্তর - এইচটিএমএল-তে পাইথন জসনকে কীভাবে প্রিন্ট করা যায়। ধন্যবাদ.
— মার্ক কেনেডেলা
1
কীভাবে এটির আরও বেশি উত্স নেই তা জানেন না। সহজ, সহজ সমাধান।
— anthv123
9
@ জিওোয়া 4, JSON.stringify(jsonObj, null, ' ')এটি 2 স্পেস দিয়ে শোভিত করবে। আমি জানি এটি দেরী হয়েছে তবে ভেবেছিলাম এই টিপটি সহায়ক হবে।
— hIpPy
2
ফায়ারফক্স এর সাথে সতর্ক করে: আপনি কোডেপ্লেক্স.কম এ প্রবেশ করার সময় সামনের সাইটটিতে ক্ষতিকারক প্রোগ্রাম থাকতে পারে
— জে রিচার্ডস
65

সিনট্যাক্স হাইলাইট করার জন্য কোড প্রিটিটিফাই ব্যবহার করুন । আমি বিশ্বাস করি স্ট্যাকওভারফ্লো এটির কোড হাইলাইট করার জন্য ব্যবহার করে।

  1. আপনার কোডযুক্ত ব্লকগুলিতে JSON মোড়ানো এবং তাদের "প্রশংসাপত্র" শ্রেণি দিন।
  2. আপনার পৃষ্ঠায় prettify.js অন্তর্ভুক্ত করুন।
  3. আপনার দস্তাবেজের বডি ট্যাগটি 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
    }
}

এটি ইনডেন্টিংয়ে সহায়তা করে না, তবে অন্যান্য উত্তরগুলি সেটিকে সম্বোধন করছে বলে মনে হচ্ছে।

— উ: লে
সূত্র
1
এখন সমস্ত গুগল কোড সংগ্রহস্থল হিমশীতল হওয়া উচিত আমাদের নতুন ব্যবহারকারীদের সরাসরি নতুন গিটহাব রেপোর দিকে ইশারা করা উচিত: https://github.com/google/code- ব্যাখ্যা
— elদেব্রোসেন্টিয়াগো
এজেএক্স রিটার্নের মধ্যে আপনি কীভাবে এটি কাজ করতে পারেন? কোডটি বডি লোডে নেই, তবে কেবল অজ্যাক্স কল করার পরে।
— টুডমো
@ টডডমো আপনার এজেএক্স রিটার্নের জন্য প্রতিক্রিয়া হ্যান্ডলার ফাংশনে আমার 3 টি পদক্ষেপ অনুসরণ করতে সক্ষম হওয়া উচিত। সুতরাং হ্যান্ডলারটি লোড পদ্ধতিতে বডিটির পরিবর্তে প্রিন্টিপ্রিন্ট কল করবে। আমি আশা করি এটি কাজ করা উচিত।
— উ লেভি
জানুস ট্রয়লসনের উত্তর পড়ে গেল এবং কেবল কাজ করেছে, তাই আমি এটি নিয়েই গিয়েছিলাম। আপনার এটি পিএইচপি-> এইচটিএমএলের জন্য খুব সহজেই পরীক্ষা করা উচিত।
— টুডমো
40

আমি মনে করি আপনি এরকম কিছু বোঝাতে চেয়েছিলেন: জেএসএন ভিজ্যুয়ালাইজেশন

আপনি এটি ব্যবহার করতে পারেন কিনা তা জানেন না তবে আপনি লেখককে জিজ্ঞাসা করতে পারেন।

— পিটার আর্নহোম
সূত্র
অবাস্তব! গ্রেট! আমি কী বলব জানি না ... আপনাকে অনেক ধন্যবাদ
— fdrv
সত্যিই একটি দুর্দান্ত সরঞ্জাম!
— ডেভিড লিলজেগ্রেন 16'17
5

এখানে একটি হালকা ওজন সমাধান রয়েছে, কেবল হাইলাইট করা ছাড়াও ওপি যা বলেছিল তা করছে, অন্য কিছুই নয়: আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে জেএসএন-কে প্রিন্ট করতে পারি?

— জানুস ট্রয়লসন
সূত্র
একটি উচ্চতর ফাংশন, এবং কেবলমাত্র আমার জন্য নয়, আপনি যা করতে চান তা হ'ল পিএইচপি -> এইচটিএমএল এবং এখানে কারণ: এটি খুব হালকা, গুগলের চেয়ে সহজতর উপায়, উপায় ছোট, এবং কোনও মেগা সংস্থার উপর নির্ভর করার প্রয়োজন নেই । আপনি আসলে কোডটি দেখতে এবং এটি বুঝতে পারেন।
— টুডমো
3

এটি সুন্দরভাবে ফর্ম্যাট করা এইচটিএমএল তালিকায় রূপান্তর করতে JSON2HTML ব্যবহার করতে পারে .. যদিও আপনার সত্যিকারের প্রয়োজনের চেয়ে খানিকটা শক্তিশালী হতে পারে

http://json2html.com

— মত্স্যবিশেষ
সূত্র
1
দুঃখিত মনে হচ্ছে jquery প্লাগ-ইন সাইটটি বাই-বাই হয়ে গেছে .. চেষ্টা করুন json2html.com
— চাদ ব্রাউন
আমার চেষ্টা করুন: সহজ সমস্যার জন্য github.com/viscocent/JSON2HTML
— ভিসকোসেন্ট
আমি ভিজ্যুয়ালাইজার সরঞ্জাম ভিজ্যুয়ালাইজার.জসন
— চাদ ব্রাউন
1

সিনট্যাক্স হাইটাল্টার জাভাস্ক্রিপ্টে বিকাশ করা একটি সম্পূর্ণরূপে স্ব-অন্তর্ভুক্ত কোড সিনট্যাক্স হাইলাইটার । সিনট্যাক্স হাইটাল্টার কীভাবে সক্ষম তা সম্পর্কে ধারণা পেতে ডেমো পৃষ্ঠাটি দেখুন।

— themihai
সূত্র
0

আপনি যদি কেবল ডিবাগিং অবস্থান থেকে এটি করতে চাইছেন তবে আপনি ফায়ারফক্স প্লাগইন যেমন JSONovich ব্যবহার করতে পারেন আপনি JSON বিষয়বস্তু দেখতে ।

বিটাতে থাকা ফায়ারফক্সের নতুন সংস্করণটি এটিকে স্থানীয়ভাবে সমর্থন করবে (অনেকটা এক্সএমএলের মতো)

— AvatarKava
সূত্র
0

এখানে একটি জাভাস্রিপ্ট সরঞ্জাম রয়েছে যা জেএসওএনকে এক্সএমএলে রূপান্তর করবে এবং তদ্বিপরীত, এটির পাঠযোগ্যতা বাড়ানো উচিত। এরপরে আপনি এটি রঙিন করতে একটি স্টাইল শীট তৈরি করতে পারেন বা এইচটিএমএলে একটি সম্পূর্ণ রূপান্তর করতে পারেন।

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

— ওয়েইন হার্টম্যান
সূত্র
-2

প্রথমে JSON স্ট্রিং নিন এবং এটিকে থেকে সত্যিকারের বস্তু তৈরি করুন। লুপটি যদিও অবজেক্টের সমস্ত বৈশিষ্ট্য, আইটেমটিকে একটি আনর্ডার্ড করা তালিকায় রেখে। প্রতিবার আপনি যখন কোনও নতুন অবজেক্টে উঠবেন, একটি নতুন তালিকা তৈরি করুন।

— geowa4
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.