AngularJS 형식 JSON 문자열 출력

92

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

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

여기에 이미지 설명 입력

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

여기에 이미지 설명 입력

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

감사합니다.

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

— Amenoire
소스

1

시도해 볼 수 있습니까?-텍스트 영역에서 Enter 키를 누르고 원하는대로 결과 문자열의 형식을 지정합니다. 그런 다음에 $watch텍스트 영역 모델을 통해 (이전 질문에 대한 답변에 따라), 당신은 할 수 있습니다 console.log()볼 당신이 Enter 키의 캐릭터에 들어갈 가치 - "/ N"나는 생각

— callmekatootie

1

이를 바탕으로, 난 당신이 텍스트 포맷하는 방법을 제안 할 수 있습니다

— callmekatootie

{ "anchorPosition": "1", "difficulty": "1", "includeInSequence": "1", "questionCount": "1"}

— amenoire

기본적으로 String 형식이 지정된 후에는 변경된 사항이 없습니다.

— amenoire 2014

아래 답변을 참조하십시오-도움이됩니까?

— callmekatootie 2014

65

다음의 선택적 매개 변수를 사용할 수 있습니다. 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
    }
}"

— Lukasz Wiktor
소스

5

이것은 $$hashKey내부 모델 추적을위한 속성 각도 사용을 보존합니다.

— PixnBits 2014 년

1

JSON.stringify(object, null, 2)2가 공백 문자 수인 경우 에도 수행 할 수 있습니다 .

— MrE

@ Lukasz, $$ Hashkey를 피할 수 있습니까?

— Md Aslam

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

— 이 바르니
소스

1

예, 이미 알고 있습니다. 하지만 텍스트 영역 자체가 모델이기 때문에이 필터를 만들 수 없습니다.

— amenoire 2014

이것은 아직 너무 유용, 너무 간단합니다 : D

— 제이미 거리

2

@ ra170 제목뿐만 아니라 전체 질문을주의 깊게 읽으십시오. 나는 단순한 json 필터와 약간 다른 것을 요구했습니다.

— amenoire 2015-08-26

당신의 것을 참고 <pre>태그가하지 말았어야 white-space하는 속성이 설정 normal나 no-wrap. 그렇지 않으면 JSON이 원하는대로 들여 쓰기되지 않습니다.

— falconepl

3

문제가 있었는데 <pre>없이하고 있었어요 ....이 답을보고 고 쳤어요 .... 감사합니다 !!

— Lucas

23

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

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

여기에 이미지 설명 입력

— 모센
소스

11

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

angular.toJson(obj, pretty);

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

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

(기본값 : 2)

— 다니엘 헤일리
소스

내가 그에게 1000 개체의 배열을 줄 때 내 페이지가 차단됩니다

— Asqan

Youvariable = angular.toJson ..., 당신이 쓴대로, 꽤의 결과처럼 보인다

— 마르 Rossato

6

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

{{데이터 | json}}

adition 속성을 추가하여

 편집 가능


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

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

— 조이 게
소스

2

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

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

— 나얀
소스