화면에 [Object Object]가 아닌 JSON 표현을 표시하는 방법

화면에 [Object Object]가 아닌 JSON 표현을 표시하는 방법

Angular를 만들고 있습니다.JS 2 애플리케이션(베타 버전 포함)내 페이지에 오브젝트의 JSON 표현을 표시하고 싶은데,[Object Object]가 아니라{key1:value1 ....}

사용할 수 있는 컴포넌트:

get example() {return JSON.stringify(this.myObject)};

다음으로 템플릿에서 다음을 수행합니다.

{{example}}

그러나 객체 배열이 있고 이러한 객체 목록을 인쇄하려면 어떻게 해야 합니까?

사용방법:

<ul>
   <li *ngFor="#obj of myArray">{{obj}}</li>
</ul>

다음과 같은 결과가 됩니다.

- [개체 객체]- [개체 객체]- [개체 객체]- [개체 객체]

기타 등등.그것들을 JSON으로 표시하는 방법이 있습니까?

웹 앱에서 개체 내부에 있는 내용을 보려면 구성 요소 HTML 템플릿의 json 파이프를 사용하십시오. 예를 들어 다음과 같습니다.

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Angular 4.3.2를 사용하여 테스트하고 유효합니다.

각진 파이프 json을 사용할 수 있습니다.

{{ jsonObject | json }}

JSON 오브젝트를 루프하려면 : 앵글루어(6.0.0+)에서는 파이프가 제공됩니다.keyvalue:

<div *ngFor="let item of object| keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

읽어주세요

JSON만 표시하려면

{{ object | json }}

오브젝트 콘텐츠를 JSON으로 덤프할 경우 를 사용하지 않고 실행할 수 있습니다.ngFor. 예:

물건

export class SomeComponent implements OnInit {
    public theObject: any = {
        simpleProp: 1,
        complexProp: {
            InnerProp1: "test1",
            InnerProp2: "test2"
        },
        arrayProp: [1, 2, 3, 4]
    };

마크업

<div [innerHTML]="theObject | json"></div>

출력(가독성을 높이기 위해 미관을 통과합니다.그렇지 않으면 단일 행으로 출력됩니다.)

{
  "simpleProp": 1,
  "complexProp": {
    "InnerProp1": "test1",
    "InnerProp2": "test2"
  },
  "arrayProp": [
    1,
    2,
    3,
    4
  ]
}

---

JSON 포메터 및 뷰어(JSONView Chrome 확장과 유사)도 발견했습니다.https://www.npmjs.com/package/ngx-json-viewer

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>

<li *ngFor="let obj of myArray">{{obj | json}}</li>

값을 취득하는 방법에는 다음 2가지가 있습니다.

1. 도트 표기법(obj.property)을 사용하여 객체의 속성에 액세스합니다.
2. 키 값을 입력하여 오브젝트 속성에 액세스합니다(예: obj["property"]).

새 구문을 사용하여 다른 사용자의 답변 업데이트:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });

오브젝트의 배열을 가지고 있으며 그것들을 통합적으로 역직렬화하려는 경우

get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };

템플릿에 추가

<ul>
   <li *ngFor="obj of example">{{obj}}</li>
</ul>

언급URL : https://stackoverflow.com/questions/34864184/how-to-display-a-json-representation-and-not-object-object-on-the-screen