[javascript] AngularJS 형식 JSON 문자열 출력

입력에서 데이터를 수집 JSON.stringify()하고 사용 하여 모델을 문자열로 변환하는 AngularJS 응용 프로그램 이 있으며 <textarea>요소가 업데이트 되면 입력 필드 가 업데이트되고 그 반대의 경우도 마찬가지입니다. 어떤 종류의 양방향 바인딩 🙂

문제는 String 자체가보기 흉해서 다음과 같이 형식화하고 싶다는 것입니다.

여기에 이미지 설명 입력

그리고 지금처럼 보이지 않습니다.

여기에 이미지 설명 입력

이것이 어떻게 달성 될 수 있는지 어떤 아이디어? 추가 정보가 필요하면 주저하지 말고 물어보세요. 모든 답변은 높이 평가되고 즉시 답변됩니다.

감사합니다.

추신 나는 이것이 일종의 지시문이나 사용자 지정 필터 여야한다고 생각합니다. 데이터 자체는 변경되지 않아야하며 출력 만 변경되어야합니다.



답변

다음의 선택적 매개 변수를 사용할 수 있습니다. JSON.stringify()

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

매개 변수

  • value JSON 문자열로 변환 할 값입니다.
  • replacer 함수 인 경우 문자열 화하는 동안 발생한 값과 속성을 변환합니다. 배열 인 경우 최종 문자열의 객체에 포함 된 속성 집합을 지정합니다. replacer 함수에 대한 자세한 설명은 JavaScript 가이드 문서 Using native JSON에서 제공됩니다.
  • space
    결과 문자열이 예쁘게 인쇄되도록합니다.

예를 들면 :

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

다음과 같은 결과를 얻을 수 있습니다.

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


답변

각도가 내장되어 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방법 도 있지만 그것을 가지고 놀지 않았습니다 ( Docs )


답변

JSON을 HTML로 렌더링하고 축소 / 열 수있는 경우 방금 만든이 지시문을 사용하여 멋지게 렌더링 할 수 있습니다.

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

여기에 이미지 설명 입력


답변

이미 언급 한 각도 json필터 외에도 각도 toJson()함수가 있습니다.

angular.toJson(obj, pretty);

이 함수의 두 번째 매개 변수를 사용하면 예쁜 인쇄를 켜고 사용할 공백 수를 설정할 수 있습니다.

true로 설정하면 JSON 출력에 줄 바꿈과 공백이 포함됩니다. 정수로 설정하면 JSON 출력에 들여 쓰기 당 많은 공백이 포함됩니다.

(기본값 : 2)


답변

json 텍스트를 편집하는 데 사용하고 싶은 것 같습니다. 그런 다음 ivarni의 방식을 사용할 수 있습니다.

{{데이터 | json}}

adition 속성을 추가하여

 편집 가능

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

이것이 당신을 도울 수 있기를 바랍니다.


답변

JSON 형식을 지정하고 구문 강조를 수행하려면 ng-prettyjson지시문을 사용할 수 있습니다 . npm 패키지를 참조하십시오.

사용 방법은 다음과 같습니다. <pre pretty-json="jsonObject"></pre>


답변