AngularJS प्रारूप JSON स्ट्रिंग आउटपुट


92

मेरे पास एक AngularJS एप्लिकेशन है, जो इनपुट से डेटा एकत्र करता है, एक मॉडल को एक स्ट्रिंग में बदल JSON.stringify()देता है और उपयोगकर्ता को इस तरह से इस मॉडल को संपादित करने देता है कि इनपुट फ़ील्ड अपडेट हो जाता है यदि <textarea>तत्व अपडेट किया गया है और इसके विपरीत। किसी तरह दो तरह का बंधन :)

समस्या यह है कि स्ट्रिंग स्वयं बदसूरत दिखती है और मैं इसे प्रारूपित करना चाहूंगा ताकि यह इस तरह दिखे:

यहां छवि विवरण दर्ज करें

और ऐसा नहीं है कि यह अब दिखता है:

यहां छवि विवरण दर्ज करें

किसी भी विचार यह कैसे पूरा किया जा सकता है? अगर आपको कुछ अतिरिक्त जानकारी चाहिए - तो पूछने में संकोच न करें। हर उत्तर की बहुत सराहना की जाती है और तुरंत जवाब दिया जाता है।

धन्यवाद।

PS मुझे लगता है कि यह किसी प्रकार का निर्देशन या कस्टम फ़िल्टर होना चाहिए। डेटा को स्वयं परिवर्तित नहीं किया जाना चाहिए, केवल आउटपुट।


1
क्या आप यह कोशिश कर सकते हैं - टेक्स्टारिया में, एंटर दबाएं और परिणामी स्ट्रिंग को वांछित रूप में प्रारूपित करें। तब आपके $watch(text पर पिछले प्रश्न के उत्तर के आधार पर) textarea मॉडल पर, क्या आप एक कर सकते हैं console.log()और देख सकते हैं कि आपको प्रवेश कुंजी के लिए स्ट्रिंग में क्या मूल्य मिलता है - मुझे लगता है कि यह "/ n" है
callmekatootie

1
इसके आधार पर, मैं सुझाव दे सकता हूं कि आप पाठ को कैसे प्रारूपित कर सकते हैं
कॉलमेकटूटी

{"एंकरपोज़िशन": "1", "कठिनाई": "1", "इनइन्सेंस असेंसेंस": "1", "
क्वैश्चनाउंट

स्ट्रिंग के बनने के बाद मूल रूप से कुछ भी नहीं बदला।
अमीनोयर

नीचे दिए गए उत्तर देखें - क्या वे मदद करते हैं?
कॉलमेकटूटी

जवाबों:


65

आप एक वैकल्पिक पैरामीटर का उपयोग कर सकते हैं JSON.stringify()

JSON.stringify(value[, replacer [, space]])

पैरामीटर

  • मान JSON स्ट्रिंग में कनवर्ट करने के लिए मान।
  • प्रतिकृति यदि कोई फ़ंक्शन, मानों और गुणों को परिवर्तित करते हुए परिवर्तित करता है; यदि कोई सरणी, अंतिम स्ट्रिंग में ऑब्जेक्ट्स में शामिल गुणों के सेट को निर्दिष्ट करता है। मूल JSON का उपयोग करके javaScript गाइड आलेख में प्रतिकृति फ़ंक्शन का विस्तृत विवरण प्रदान किया गया है।
  • अंतरिक्ष परिणामी स्ट्रिंग को बहुत मुद्रित किया जाता है।

उदाहरण के लिए:

JSON.stringify({a:1,b:2,c:{d:3, e:4}},null,"    ")

आप निम्नलिखित परिणाम देंगे:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

5
ध्यान दें कि यह $$hashKeyआंतरिक मॉडल ट्रैकिंग के लिए संपत्ति कोणीय उपयोग को संरक्षित करता है
PixnBits

1
आप यह भी कर सकते हैं JSON.stringify(object, null, 2)जहां 2 सफेद स्थान वर्णों की संख्या है।
श्रीमती

@ लुकाज़, क्या मैं $ $ हशकी से बच सकता हूँ?
Md असलम

433

कोणीय में filterदिखाने के लिए अंतर्निहित हैJSON

<pre>{{data | json}}</pre>

preव्हॉट्सएप और लाइनब्रेक के संरक्षण के लिए -tag के उपयोग पर ध्यान दें

डेमो:

angular.module('app', [])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $scope.data = {
        a: 1,
        b: 2,
        c: {
          d: "3"
        },
      };

    }
  ]);
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <pre>{{data | json}}</pre>
  </body>

</html>

वहाँ भी एक angular.toJsonविधि है, लेकिन मैं उस ( डॉक्स ) के साथ नहीं खेला है


1
हां, मैं यह पहले से ही जानता हूं। लेकिन मैं इस फ़िल्टर को नहीं बना सकता क्योंकि textarea ही एक मॉडल है।
अमीनोयर

यह इतना सरल है, फिर भी इतना उपयोगी है: डी
जेमी स्ट्रीट

2
@ ra170 पूरे सवाल को ध्यान से पढ़ें, न कि केवल हेडिंग। मैं एक साधारण json फ़िल्टर की तुलना में थोड़ी अलग चीज़ के लिए पूछ रहा था।
अमीनोयर

ध्यान दें कि आपके <pre>टैग में white-spaceसंपत्ति सेट normalया नहीं होनी चाहिए no-wrap। अन्यथा, आपका JSON आपके इच्छानुसार इंडेंट नहीं किया जाएगा।
फाल्कोप्लान

3
मुझे समस्या हो रही थी लेकिन मैं <pre> के बिना कर रहा था .... मैंने यह जवाब देखा और मैंने तय किया .... धन्यवाद !!
लुकास

23

यदि आप JSON को HTML के रूप में प्रस्तुत करना चाहते हैं और इसे ढह / खोला जा सकता है, तो आप इस निर्देश का उपयोग कर सकते हैं कि मैंने इसे अच्छी तरह से प्रस्तुत करने के लिए बनाया है:

https://github.com/mohsen1/json-formatter/

यहां छवि विवरण दर्ज करें


11

पहले से उल्लेख किए गए कोणीय jsonफिल्टर के अलावा , कोणीय toJson()कार्य भी है ।

angular.toJson(obj, pretty);

इस फ़ंक्शन का दूसरा पैराम आपको सुंदर प्रिंटिंग पर स्विच करने और उपयोग करने के लिए रिक्त स्थान की संख्या निर्धारित करने देता है।

यदि यह सच है, तो JSON आउटपुट में नईलाइन और व्हॉट्सएप होंगे। यदि पूर्णांक पर सेट किया जाता है, तो JSON आउटपुट में कई इंडेंटेशन प्रति स्पेस होगा।

(डिफ़ॉल्ट: 2)


जब मैं उसे 1000 वस्तुओं की एक सरणी देता हूं तो मेरा पृष्ठ अवरुद्ध हो जाता है
अश्कान

Youvariable = angular.toJson ...., जैसा कि आपने लिखा है, यह सुंदर में परिणाम की तरह दिखता है
Márcio Rossato

6

मुझे लगता है कि आप json पाठ को संपादित करने के लिए उपयोग करना चाहते हैं। तब आप इवार्नी के तरीके का उपयोग कर सकते हैं:

{{डाटा | json}}
और बनाने के लिए एक विज्ञापन विशेषता जोड़ें
 संपादन योग्य

<pre contenteditable="true">{{data | json}}</pre>

आशा है इससे आपको सहायता मिलेगी।


2

यदि आप JSON को प्रारूपित करना चाहते हैं और कुछ सिंटैक्स हाइलाइटिंग भी करते हैं, तो आप ng-prettyjsonनिर्देश का उपयोग कर सकते हैं । Npm पैकेज देखें।

इसका उपयोग कैसे करना है: <pre pretty-json="jsonObject"></pre>

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.