Saving JSON data in a variable or array post subscription: What's the preferred method?

Question

Saving JSON data in a variable or array post subscription: What's the preferred method?

I have been receiving JSON files in the following format:

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

Although the length of these files varies, the structure always remains the same:

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

I have attempted to subscribe and retrieve this data, but I am facing challenges storing it properly. When using the code below:

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

The console displays the JSON data successfully. However, when I try to store the data in different variables as shown here:

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);
});
}

The output in the console remains the same for all variables.

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

I aim to manipulate the data similar to how KeyValuePipe works, yet I am unable to achieve this due to my inability to save the values appropriately. Any assistance on resolving this issue would be greatly appreciated.

Further details can be provided upon request.

arrays json angular typescript

Answer 1

Answer №1

Let me clarify a few points...

public dataCollection: Array<any> = [];

  this.service.fetchEntityInfo()
    .subscribe(result => {
        dataCollection=result;
    });

There you have it. You have successfully saved the desired value.

If you are really keen on logging your object as a string, you can reference the specific fields like so...

console.log(this.dataCollection[0].specificFieldInYourObject)

Or you could create a function to loop through the keys of your objects. However, since your query was about storing the object, the above method should suffice.

Answer 2

Let me clarify a few points...

public dataCollection: Array<any> = [];

  this.service.fetchEntityInfo()
    .subscribe(result => {
        dataCollection=result;
    });

There you have it. You have successfully saved the desired value.

If you are really keen on logging your object as a string, you can reference the specific fields like so...

console.log(this.dataCollection[0].specificFieldInYourObject)

Or you could create a function to loop through the keys of your objects. However, since your query was about storing the object, the above method should suffice.

Answer 3

Answer №2

You can improve your code by utilizing the async pipe instead of subscribing in the TypeScript file. Taking inspiration from examples provided by @ak.leimrey and @Fateme Fazli

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

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

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

Incorporate the following into your template:

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

Answer 4

You can improve your code by utilizing the async pipe instead of subscribing in the TypeScript file. Taking inspiration from examples provided by @ak.leimrey and @Fateme Fazli

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

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

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

Incorporate the following into your template:

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

Answer 5

Answer №3

If you need to show data from a database in your application, it must be saved in a component property. Here's an example:

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

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

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

After that, you can display the data like this:

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

<div>{{ myData }}</div>

Answer 6

If you need to show data from a database in your application, it must be saved in a component property. Here's an example:

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

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

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

After that, you can display the data like this:

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

<div>{{ myData }}</div>

Saving JSON data in a variable or array post subscription: What's the preferred method?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to clear the parent component's content from the child component in Angular?

Displayed even when data is present, the PrimeNg empty message persists

Arranging objects in an array based on a separate array of strings

Which types of mouse events are compatible with Angular2?

The issue arises when trying to pass multiple parameters with the Angular 2 router and encountering

What impact do the input values of an Angular reactive form have on the DOM?

Ways to dynamically fetch data by merging the response outcome with a dynamic parameter from the route in Vue.js

What is the best way to authenticate an admin in the front-end using backend technologies like Node.js, Angular, and MongoDB?

Trigger the identical event to be sent to two distinct functions upon the corresponding button click in Angular 2 using Typescript

Using MUI DatePicker and react-hook-form to implement a date picker in the format DD/MM/YYYY

Exploring jQuery: Mastering the art of iterating through multi-level arrays

Having trouble retrieving a value from the img.onload event handler. A 'boolean' type error is being thrown, indicating it cannot be assigned to type '(this: GlobalEventHandlers, ev: Event) => any'

Integration of Sproutcore and Rails for handling many-to-many relationships with JSON

Leverage the TypeScript compiler's output from a .NET library within a Blazor application by referencing it

Error encountered: GWT RPCManager performTransactionReply- Transaction does not exist

Is it possible to merge these two scripts into a single one within Vue?

Flexible type definition including omission and [key:string]: unknown

Why does WebStorm fail to recognize bigint type when using TSC 3.4.x?

Sort columns in a MUI datatable

Why is it necessary to use 'then' on the response JSON when using the Fetch API? It's like trying to decipher the hidden meaning