Angular 2: Creating a Reusable Object for Uniform JSON Structures

Question

Angular 2: Creating a Reusable Object for Uniform JSON Structures

I am facing an issue with JSON data as I have 3 tables in my database named "dictionary" with the same structure but different column names:

{"id":1,"test_1":"test"},{"id":2,"test_1":"lalala"} - first JSON 


{"id":1,"test_2":"****"},{"id":2,"test_2":"afery-t"} - second JSON

I aim to create a single Class in Angular 2

 export class dictionary{

   id:number;
   dictValue:string;

}

Is it feasible to convert these different JSON objects into one like this, because this current method is not functioning:

res => <dictionary[]>  res.json()

Furthermore, in the HTML template, I am getting JSON object instead of class values in NgFor.

 <tr *ngFor="let item of directoryArray">
{{item.test_1}} - I desire {{item.dictValue}}
</tr>

controller

 directoryArray:dictionary[];
this._httpService.getAll().subscribe(
            data => this.directoryArray = data,
            error => alert(error),
            () => console.log("Done"));

Thank you for your assistance. Can you please let me know if it is possible or if I need to modify values in the database or create different objects for each JSON?

json angular typescript

Answer 1

Answer №1

To implement this functionality, it is recommended to utilize an Interface:

export interface Dictionary { // Suggesting the use of 'Dictionary' here
   id: number;
   dictValue: string;
}

If you are unsure about how your getAll function is structured, here is an example demonstrating how to retrieve the initial JSON data:

getFirstJSON(): Observable<Dictionary[]> {
  return this.http.get('the Url')
    .map(res => res.json().map((x:any) => Object.assign({id:x.id,dictValue:x.test_1}))
}

In the code snippet above, we are using the map function to align the properties with your specified interface.

Subsequently, within your component file:

directoryArray: Dictionary[];

this.service.getFirstJSON()
  .subscribe(data => {
    this.directoryArray = data;
  })

Now that the properties adhere to the defined interface, they can be utilized in the template as follows:

<tr *ngFor="let item of directoryArray">
  <td>{{item.dictValue}}</td>
</tr>

Answer 2

To implement this functionality, it is recommended to utilize an Interface:

export interface Dictionary { // Suggesting the use of 'Dictionary' here
   id: number;
   dictValue: string;
}

If you are unsure about how your getAll function is structured, here is an example demonstrating how to retrieve the initial JSON data:

getFirstJSON(): Observable<Dictionary[]> {
  return this.http.get('the Url')
    .map(res => res.json().map((x:any) => Object.assign({id:x.id,dictValue:x.test_1}))
}

In the code snippet above, we are using the map function to align the properties with your specified interface.

Subsequently, within your component file:

directoryArray: Dictionary[];

this.service.getFirstJSON()
  .subscribe(data => {
    this.directoryArray = data;
  })

Now that the properties adhere to the defined interface, they can be utilized in the template as follows:

<tr *ngFor="let item of directoryArray">
  <td>{{item.dictValue}}</td>
</tr>

Angular 2: Creating a Reusable Object for Uniform JSON Structures

Answer №1

Similar questions

Refine the JSON data to only include the values you need

Using local variables in Angular2 templates

Utilizing HTML and Ionic 3.x: Implementing a for loop within the HTML file by utilizing "in" instead of "of"

The selectors in NgRx store are failing to retrieve data from the main global store

Obtaining a JSON-formatted error log backtrace in Rails

Fill in the missing keys, values, and data within the JSON object

Upon implementing a custom adapter and incorporating JSON, the application unexpectedly crashed

Is it necessary to retrieve the data that was posted from the back-end? Implementation using Angular and Node.js

Running a TypeScript program that has been compiled with module resolution is not working as expected

Guide to incorporating code coverage in React/NextJs using Typescript (create-next-app) and cypress

How to delete an item from an object in TypeScript

Employ jq to organize keys within a JSON object based on a specific property

Is there a way to guide the user to a different page while still inside a getJSON function?

I am attempting to incorporate an NPM package as a plugin in my Next.js application in order to prevent the occurrence of a "Module not found: Can't resolve 'child_process'" error

Issue with SvelteKit: PageData not being refreshed in API response after initial render

What is the best approach: Developing a class or a service to handle multiple interfaces?

receiving JSON data in Java RESTful web services using the Jersey framework (javax.ws.rs.*)

Access PDF document in a fresh tab

Converting serialized form data to JSON in Node.js

Trouble arises when applying CSS to ng-x accordion styling