เอาต์พุตสตริง JSON รูปแบบ AngularJS

Question 1

ฉันมีแอปพลิเคชัน AngularJS ซึ่งรวบรวมข้อมูลจากอินพุตแปลงโมเดลเป็นสตริงโดยใช้JSON.stringify()และให้ผู้ใช้แก้ไขโมเดลนี้ในลักษณะที่ฟิลด์อินพุตจะได้รับการอัปเดตหาก<textarea>องค์ประกอบได้รับการอัปเดตและในทางกลับกัน การผูกสองทางบางประเภท :)

ปัญหาคือ String นั้นดูน่าเกลียดและฉันต้องการจัดรูปแบบให้มีลักษณะดังนี้:

ป้อนคำอธิบายภาพที่นี่

และไม่เหมือนตอนนี้:

ป้อนคำอธิบายภาพที่นี่

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

ขอขอบคุณ.

ป.ล. ฉันเดาว่านี่น่าจะเป็นคำสั่งหรือฟิลเตอร์ที่กำหนดเอง ข้อมูลเองไม่ควรเปลี่ยนแปลงเฉพาะเอาต์พุตเท่านั้น

Question 2

คุณสามารถใช้พารามิเตอร์ทางเลือกของ JSON.stringify()

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

พารามิเตอร์

valueค่าที่จะแปลงเป็นสตริง JSON

แทนที่ถ้าฟังก์ชันแปลงค่าและคุณสมบัติที่พบในขณะที่สตริง; ถ้าอาร์เรย์ระบุชุดคุณสมบัติที่รวมอยู่ในอ็อบเจ็กต์ในสตริงสุดท้าย คำอธิบายโดยละเอียดของฟังก์ชันตัวแทนที่มีอยู่ในบทความแนะนำจาวาสคริปต์การใช้ JSON ดั้งเดิม

ช่องว่าง ทำให้สตริงผลลัพธ์ถูกพิมพ์ออกมาสวย

ตัวอย่างเช่น:

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

จะให้ผลลัพธ์ดังต่อไปนี้:

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

Question 3

Angular มีในตัว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วิธีการ แต่ฉันไม่ได้เล่นกับสิ่งนั้น ( เอกสาร )

Question 4

หากคุณต้องการแสดง JSON เป็น HTML และสามารถยุบ / เปิดได้คุณสามารถใช้คำสั่งนี้ที่ฉันเพิ่งสร้างขึ้นเพื่อแสดงผลได้อย่างสวยงาม:

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

ป้อนคำอธิบายภาพที่นี่

Question 5

นอกจากตัวกรอง เชิงมุมที่jsonกล่าวไปแล้วยังมีฟังก์ชัน เชิงมุมtoJson()อีกด้วย

angular.toJson(obj, pretty);

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

หากตั้งค่าเป็นจริงเอาต์พุต JSON จะมีบรรทัดใหม่และช่องว่าง หากตั้งค่าเป็นจำนวนเต็มเอาต์พุต JSON จะมีช่องว่างจำนวนมากต่อการเยื้อง

(ค่าเริ่มต้น: 2)

Question 6

ฉันเดาว่าคุณต้องการใช้เพื่อแก้ไขข้อความ json จากนั้นคุณสามารถใช้วิธีของ ivarni:

{{ข้อมูล | json}}

และเพิ่มแอตทริบิวต์ adition เพื่อสร้าง

 แก้ไขได้

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

หวังว่านี่จะช่วยคุณได้

Question 7

หากคุณต้องการจัดรูปแบบ JSON และทำการไฮไลต์ไวยากรณ์คุณสามารถใช้ng-prettyjsonคำสั่ง ดูแพ็คเกจ npm

นี่คือวิธีการใช้งาน: <pre pretty-json="jsonObject"></pre>