Định dạng AngularJS đầu ra chuỗi JSON

92

Tôi có một ứng dụng AngularJS, ứng dụng này thu thập dữ liệu từ đầu vào, chuyển đổi mô hình thành một chuỗi bằng cách sử dụng JSON.stringify()và cho phép người dùng chỉnh sửa mô hình này theo cách mà các trường đầu vào được cập nhật nếu <textarea>phần tử được cập nhật và ngược lại. Một số loại ràng buộc hai chiều :)

Vấn đề là bản thân Chuỗi trông xấu xí và tôi muốn định dạng nó để nó trông như thế này:

nhập mô tả hình ảnh ở đây

Và không giống như bây giờ:

nhập mô tả hình ảnh ở đây

Bất kỳ ý tưởng làm thế nào điều này có thể được thực hiện? Nếu bạn cần một số thông tin bổ sung - đừng ngần ngại hỏi. Mọi câu trả lời đều được đánh giá cao và trả lời ngay lập tức.

Cảm ơn bạn.

Tái bút Tôi đoán đây phải là một số loại chỉ thị hoặc một bộ lọc tùy chỉnh. Bản thân dữ liệu KHÔNG ĐƯỢC thay đổi, chỉ có đầu ra.

— amenoire
nguồn

1

Bạn có thể thử cách này không - Trong vùng văn bản, nhấn enter và định dạng chuỗi kết quả như mong muốn. Sau đó, trong bạn $watch(dựa trên câu trả lời cho câu hỏi trước) so với mô hình textarea, bạn có thể làm một console.log()và xem những gì giá trị bạn nhận được trong chuỗi cho phím Enter - Tôi nghĩ đó là "/ n"

— callmekatootie

1

Dựa trên điều này, tôi có thể đề nghị làm thế nào bạn có thể định dạng văn bản

— callmekatootie

{"anchorPosition": "1", "khó khăn": "1", "includeInSequence": "1", "questionCount": "1"}

— amenoire

Về cơ bản không có gì thay đổi sau khi String được hình thành.

— amenoire

Xem câu trả lời bên dưới - chúng có giúp ích gì không?

— callmekatootie

65

Bạn có thể sử dụng một tham số tùy chọn là JSON.stringify()

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

Thông số

value Giá trị để chuyển đổi thành chuỗi JSON.

Replaceer Nếu một hàm, biến đổi các giá trị và thuộc tính gặp phải khi xâu chuỗi; nếu là một mảng, chỉ định tập hợp các thuộc tính có trong các đối tượng trong chuỗi cuối cùng. Mô tả chi tiết về hàm thay thế được cung cấp trong bài viết hướng dẫn javaScript Sử dụng JSON gốc.

khoảng trắng Làm cho chuỗi kết quả được in đẹp.

Ví dụ:

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

sẽ cho bạn kết quả sau:

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

— Lukasz Wiktor
nguồn

5

lưu ý rằng bảo tồn này $$hashKeysở hữu sử dụng góc để theo dõi mô hình nội bộ

— PixnBits

1

Bạn cũng có thể thực hiện JSON.stringify(object, null, 2)với 2 là số ký tự khoảng trắng.

— MrE

@ Lukasz, Tôi có thể tránh $$ Hashkey không?

— Md Aslam

433

Angular được tích hợp sẵn filterđể hiển thịJSON

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

Lưu ý việc sử dụng pre-tag để bảo toàn khoảng trắng và dấu ngắt dòng

Bản giới thiệu:

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>

Mở rộng đoạn mã

Ngoài ra còn có một angular.toJsonphương pháp, nhưng tôi chưa thử với nó ( Tài liệu )

— ivarni
nguồn

1

Vâng, tôi biết điều này rồi. Nhưng tôi không thể tạo bộ lọc này vì bản thân textarea là một mô hình.

— amenoire

Điều này thật đơn giản nhưng rất hữu ích: D

— Jamie Street.

2

@ ra170 Vui lòng đọc kỹ toàn bộ câu hỏi, không chỉ tiêu đề. Tôi đã yêu cầu một thứ hơi khác so với một bộ lọc json đơn giản.

— amenoire

Lưu ý rằng <pre>thẻ của bạn không được white-spaceđặt thuộc tính thành normalhoặc no-wrap. Nếu không, JSON của bạn sẽ không được thụt vào như bạn muốn.

— falconepl

3

Tôi đang gặp sự cố nhưng tôi đã làm mà không có <pre> .... Tôi đã thấy câu trả lời này và tôi đã sửa .... cảm ơn !!

— Lucas

23

Nếu bạn đang tìm cách hiển thị JSON dưới dạng HTML và nó có thể được thu gọn / mở, bạn có thể sử dụng lệnh này mà tôi vừa thực hiện để kết xuất nó một cách độc đáo:

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

nhập mô tả hình ảnh ở đây

— Mohsen
nguồn

11

Ngoài bộ lọc gócjson đã được đề cập, còn có toJson()chức năng góc .

angular.toJson(obj, pretty);

Tham số thứ hai của chức năng này cho phép bạn bật chế độ in đẹp và đặt số lượng khoảng trắng để sử dụng.

Nếu được đặt thành true, đầu ra JSON sẽ chứa các dòng mới và khoảng trắng. Nếu được đặt thành số nguyên, đầu ra JSON sẽ chứa nhiều khoảng trắng cho mỗi lần thụt đầu dòng.

(mặc định: 2)

— Daniel Haley
nguồn

trang của tôi bị chặn khi tôi cho anh ta một mảng 1000 đối tượng

— Asqan

Youvariable = angular.toJson ...., như bạn đã viết, nó trông giống như kết quả trong khá

— Márcio Rossato

6

Tôi đoán bạn muốn sử dụng để chỉnh sửa văn bản json. Sau đó, bạn có thể sử dụng cách của ivarni:

{{dữ liệu | json}}

và thêm thuộc tính adition để tạo

 có thể chỉnh sửa


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

Hy vọng điều này có thể giúp bạn.

— Joy Ge
nguồn

2

Nếu bạn muốn định dạng JSON và cũng thực hiện một số tô sáng cú pháp, bạn có thể sử dụng ng-prettyjsonchỉ thị. Xem gói npm.

Đây là cách sử dụng nó: <pre pretty-json="jsonObject"></pre>

— Nayan
nguồn