Как сохранить значения JSON в переменной / массиве после подписки?

Question

Я получаю файлы JSON, которые выглядят как this :

{streetAddress: "Kosterlijand 20", postalCode: "3980", city: "Bunnik", country: "Netherlands"}

Файлы имеют разную длину, но структура всегда будет

{key: "string value", key: "string value", etc...}

IЯ пытаюсь подписаться, чтобы получить эти данные, но как бы я ни пытался подписаться, я никак не могу сохранить данные. Если я использую только это:

this.service.getEntityDetails()
        .subscribe(data => console.log(data));

Я вижу в консоли:

{streetAddress: "Kosterlijand 20", postalCode: "3980", city: "Bunnik", country: "Netherlands"}

Но если я попробую что-нибудь еще, например это:

    public test: any[];
    public test1: any[]=[];
    public test2: string[];
    public test3: string[]=[];
    public test4: {};

    constructor(service:Service){}
    this.service.getEntityDetails()
    .subscribe(data => {
        test=data;
        test1=data;
        test2=data;
        test3=data;
        test4=data;

        console.log("test:"+test+", test1: "+test1+", test2: "+test2+", test3: "+test3);
    });
 }

Вывод в консоли всегда один и тот же:

test:[object Object], test1: [object Object], test2: [object Object], test3: [object Object] test4[object Object]

Я бы хотел, чтобы он работал так, как работает KeyValuePipe.

Но поскольку я никак не могу сохранить эти значения,Я не могу использовать трубу. Может кто-нибудь помочь мне решить эту проблему?

Я могу предоставить больше информации, если это необходимо.

Answer 1

Итак, чтобы объяснить несколько вещей ...

public someRandomData: Array<any> = [];

  this.service.getEntityDetails()
    .subscribe(data => {
        someRandomData=data;
    });

Вот и все. Вы уже успешно сохранили значение, которое хотели получить.

Если вы ДЕЙСТВИТЕЛЬНО хотели сделать консольный журнал вашего объекта в строке, вы должны либо обратиться к полям, которые объект имеет как ...

console.log(this.someRandomData[0].fieldOfYourJSONObject)

Вы пишете функцию, которая перебирает ключи ваших объектов. Но так как вы попросили только сохранить свой объект, этого должно быть достаточно.

Answer 2

Вы можете использовать асинхронный канал вместо подписки в файле ts. На примере @ ak.leimrey и @Fateme Fazli

/** @file app.component.ts */ 

@Component({ /* ... */ })
export class AppComponent  {
    public test$: Observable<any[]>;

    constructor(service: Service) {
       this.test$ = this.service.getEntityDetails();
    }
}

В вашем шаблоне:

<ng-container *ngIf="(test$ | async) as test">
    <div *ngFor="let item of test | keyvalue">
        {{item.key}}:{{item.value}}
    </div>
</ng-container>

Answer 3

Если вы хотите отобразить данные, поступающие из источника данных, они должны храниться в свойстве компонента. Пример:

/** @file app.component.ts */ 

@Component({ /* ... */ })
export class AppComponent  {
  public test: any[];

  constructor(service: Service) {
    this.service
      .getEntityDetails()
      .subscribe(data => {
        this.test = data;  
        console.log('My data', this.test);
      });
  }
}

Затем вы можете отобразить это так:

<!-- @file app.component.html -->

<div>{{ test }}</div>