Change Json data into a TypeScript class [ts]

Question

Change Json data into a TypeScript class [ts]

I have the following JSON data:

{"mapData":{"test":"success","publicKey":""},"statusCode":200,"message":null}

How can I convert this JSON to a TypeScript class?

The mapData contains anonymous values:

It may be
```
{"test":"success","publicKey":""}
```

Or it may be

{"test":"success","publicKey":"","anotherKey":"anotherValue"}

So, how do we convert this JSON to a TypeScript object?

{"mapData":{"test":"success","publicKey":""},"statusCode":200,"message":null}

Here is an example of my TypeScript demo:

export class GenericResponse {

 mapData: any;
 statusCode: number;
 message: string;
}

Below are the Java classes I used to convert Object to JSON:

/**
  * Author: Atwa
  * Date: Jul 2, 2018
  */
 public class Response {

private Map<String, Object> mapData = new HashMap<>();

private int statusCode = 0;

private String message;


public Map<String, Object> getMapData() {
    return mapData;
}

public void setMapData(Map<String, Object> mapData) {
    this.mapData = mapData;
}

}

java angularjs typescript

Answer 1

Answer №1

Below is the method I attempted:

  export class GenericResponse {

 mapData: any;
 statusCode: number;
 message: string;
 }

The file test.json contains the following data:

   {"mapData":{"test":"success","publicKey":""},"statusCode":200,"message":null}

In the TypeScript file:

   import { Component, OnInit } from '@angular/core';
   import { Http, RequestMethod, Response, Headers, RequestOptions, 
  RequestOptionsArgs } from '@angular/http';

     import {GenericResponse} from  "../../model/genericResponse.model";
  export class genericSerivice implements onInit{

  genericResponse:GenericResponse;
  mockTesturl="assets/data/test.json"

  public getGenericResponse():  Observable<GenericResponse>{

   ngOnInit(){

   this.getGenericResponse()
  }

  let params: RequestOptionsArgs = {
     headers: new Headers({
    url: this.mockTesturl,
    method: RequestMethod.Get,
    '_id': new Date().getTime(),
    'Cache-Control': 'no-cache',
    'Pragma':'no-cache',
    })
   };

    return this.http.get(this.mockTesturl, params)
  .pipe(map(res => this.extractGenericResponse(res)),
   catchError((error: any) => {
    if (error.status === 500) {
      return Observable.throw(new Error(error.status));
    }
    }))
  }

  private extractGenericResponse(res: any) {
 this.genericResponse = res;
}

https://i.sstatic.net/FZg8c.jpg

I hope this explanation is useful.

Answer 2

Below is the method I attempted:

  export class GenericResponse {

 mapData: any;
 statusCode: number;
 message: string;
 }

The file test.json contains the following data:

   {"mapData":{"test":"success","publicKey":""},"statusCode":200,"message":null}

In the TypeScript file:

   import { Component, OnInit } from '@angular/core';
   import { Http, RequestMethod, Response, Headers, RequestOptions, 
  RequestOptionsArgs } from '@angular/http';

     import {GenericResponse} from  "../../model/genericResponse.model";
  export class genericSerivice implements onInit{

  genericResponse:GenericResponse;
  mockTesturl="assets/data/test.json"

  public getGenericResponse():  Observable<GenericResponse>{

   ngOnInit(){

   this.getGenericResponse()
  }

  let params: RequestOptionsArgs = {
     headers: new Headers({
    url: this.mockTesturl,
    method: RequestMethod.Get,
    '_id': new Date().getTime(),
    'Cache-Control': 'no-cache',
    'Pragma':'no-cache',
    })
   };

    return this.http.get(this.mockTesturl, params)
  .pipe(map(res => this.extractGenericResponse(res)),
   catchError((error: any) => {
    if (error.status === 500) {
      return Observable.throw(new Error(error.status));
    }
    }))
  }

  private extractGenericResponse(res: any) {
 this.genericResponse = res;
}

https://i.sstatic.net/FZg8c.jpg

I hope this explanation is useful.

Change Json data into a TypeScript class [ts]

Answer №1

Similar questions

Display a single item from nested objects using ng-repeat

Ways to showcase an array with HTML content in AngularJS without using ng-repeat

Achieving a successful 200 response from CORS in node-http-proxy for OPTIONS requests

Custom component not rendering expected CSS style

retrieving the chosen information from the JcomboBox

Utilizing Jackson to map JSON data fetched from a URL

Importing dynamically into Ionic 2 from locations other than the "node_modules" directory

Getting the value of "Page=?" from the href attribute in an HTML tag can be done using Selenium Webdriver and Java

Angular 6 issue: Data not found in MatTableDataSource

Exploring ways to retrieve a boolean type field from MongoDB using Angular Formly

Establishing a Connection between an Android Application and a Jersey RESTful Web Service

angular-cli: Select templates based on the current environment

Multiple instances of the identical 'Angular application' displayed simultaneously on the webpage

Alter text within a string situated between two distinct characters

Ways to retrieve a value from a span using the Document Object Model

The function __WEBPACK_IMPORTED_MODULE_3_ionic_native__.a.open is returning an error

Mastering the use of Chrome in Selenium with the finesse of Protractor

Using the spread operator in React to distribute JSX elements within a map function

Is there a way to implement hover behavior for a Material-UI Button within a ButtonGroup component?

"Encountering a problem when trying to display Swagger-Editor for the second