AngularJS ফর্ম্যাট JSON স্ট্রিং আউটপুট

Question 1

আমার একটি অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশন রয়েছে, যা ইনপুট থেকে ডেটা সংগ্রহ করে, একটি মডেলকে স্ট্রিংয়ে রূপান্তর করে ব্যবহার করে JSON.stringify()কোনও ব্যবহারকারীকে এই মডেলটি এমনভাবে সম্পাদনা করতে দেয় যে <textarea>উপাদানটি আপডেট করা হয় এবং বিপরীতভাবে ইনপুট ক্ষেত্রগুলি আপডেট হয় updated একরকম দ্বিমুখী বাঁধাই :)

সমস্যাটি হ'ল স্ট্রিংটি নিজেই কুৎসিত লাগে এবং আমি এটি ফর্ম্যাট করতে চাই তাই এটি দেখতে এটির মতো দেখাচ্ছে:

এখানে চিত্র বর্ণনা লিখুন

এখন দেখতে যেমন লাগে না তেমন:

এখানে চিত্র বর্ণনা লিখুন

কোনও ধারণা কীভাবে এটি সম্পাদন করা যায়? আপনার যদি কিছু অতিরিক্ত তথ্য প্রয়োজন হয় - জিজ্ঞাসা করতে দ্বিধা করবেন না। প্রতিটি উত্তর অত্যন্ত প্রশংসা করা হয় এবং সঙ্গে সঙ্গে উত্তর দেওয়া হয়।

ধন্যবাদ.

PS আমার ধারণা এটি কোনওরকম নির্দেশিকা বা কাস্টম ফিল্টার হওয়া উচিত। ডেটা নিজেই পরিবর্তন করা উচিত নয়, কেবল আউটপুট।

Question 2

আপনি একটি alচ্ছিক পরামিতি ব্যবহার করতে পারেন JSON.stringify()

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

পরামিতি

মান JSON স্ট্রিংয়ে রূপান্তর করতে মান।

replacer যদি একটি ফাংশন, স্ট্রিংফাই করার সময় সম্মুখীন হওয়া মান এবং বৈশিষ্ট্যগুলিকে রূপান্তর করে; যদি একটি অ্যারে হয় তবে চূড়ান্ত স্ট্রিংয়ের অবজেক্টগুলিতে অন্তর্ভুক্ত বৈশিষ্ট্যের সেট নির্দিষ্ট করে। নেতিবাচক JSON ব্যবহার করে জাভা স্ক্রিপ্ট গাইড নিবন্ধে রেপ্লারার ফাংশনটির বিশদ বিবরণ সরবরাহ করা হয়েছে।

স্থান ফলাফল স্ট্রিংটি বেশ মুদ্রিত হওয়ার কারণ দেয়।

উদাহরণ স্বরূপ:

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

আপনাকে নিম্নলিখিত ফলাফল দেবে:

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

Question 3

কৌণিক একটি বিল্ট-ইন করেছেন filterদেখানোর জন্যJSON

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

preসাদা স্থান এবং লাইন ব্রেকগুলি সংরক্ষণ করার জন্য -ট্যাগ ব্যবহার নোট করুন Note

ডেমো:

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পদ্ধতিও আছে, তবে আমি ( ডক্স ) এর সাথে খেলিনি

Question 4

আপনি যদি জেএসএন কে এইচটিএমএল হিসাবে রেন্ডার করতে খুঁজছেন এবং এটি ধসে / খোলা যেতে পারে তবে আপনি এই নির্দেশটি সুন্দরভাবে রেন্ডার করার জন্য ব্যবহার করতে পারেন:

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

এখানে চিত্র বর্ণনা লিখুন

Question 5

ছাড়াও কৌণিক jsonফিল্টার ইতিমধ্যে উল্লেখ করা হয়েছে, রয়েছে কৌণিক toJson()ফাংশন ।

angular.toJson(obj, pretty);

এই ফাংশনের দ্বিতীয় প্যারাম আপনাকে সুন্দর মুদ্রণটি স্যুইচ করতে এবং ব্যবহারের জন্য স্পেসের সংখ্যা নির্ধারণ করতে দেয়।

যদি সত্য হিসাবে সেট করা থাকে, JSON আউটপুটে নতুন লাইন এবং সাদা স্থান থাকবে। যদি কোনও পূর্ণসংখ্যকে সেট করা থাকে, JSON আউটপুটটিতে প্রতি ইন্ডেন্টেশনের জন্য অনেকগুলি স্পেস থাকবে।

(ডিফল্ট: 2)

Question 6

আমি অনুমান করি আপনি json পাঠ্য সম্পাদনা করতে ব্যবহার করতে চান। তারপরে আপনি ivarni এর উপায় ব্যবহার করতে পারেন:

। {তথ্য | জসন}}

এবং করতে একটি অ্যাডিশন বৈশিষ্ট্য যুক্ত করুন

 সম্পাদনাযোগ্য

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

আশা করি এটি আপনাকে সহায়তা করতে পারে।

Question 7

আপনি যদি JSON ফর্ম্যাট করতে এবং কিছু বাক্য গঠন হাইলাইট করতে চান তবে আপনি ng-prettyjsonনির্দেশটি ব্যবহার করতে পারেন । এনপিএম প্যাকেজ দেখুন।

এটি কীভাবে ব্যবহার করবেন তা এখানে: <pre pretty-json="jsonObject"></pre>