Navigating Angular: Uncover the Secrets of Unwrapping Json Data

Question

Navigating Angular: Uncover the Secrets of Unwrapping Json Data

I need some help with parsing Json data in Angular TypeScript. The data is structured as follows:

https://i.sstatic.net/H7s8q.png

When calling a REST API, I want to convert a Java class object into an array of model classes. How can this be achieved?

"gameId": 66,
"kashScore": 0,
"samScore": 1,
"wonBy": "Sam",
"createUserId": 0,
"lastModifiedUserId": 0,
"creationDate": "2020-04-20T14:05:44.263+0000",
"lastModifiedDateTime": "2020-04-20T14:05:44.264+0000",
"sessionId": 1000,
"count": null

Here is my model class structure:

https://i.sstatic.net/AqfVh.png

Additionally, there is information for tracking pagination:

https://i.sstatic.net/QOtZP.png

Although I attempted a solution, it resulted in an error:

https://i.sstatic.net/rQbtG.png

json angular typescript observable httpclient

Answer 1

Answer №1

Your answer consists of an array structure. The data representing Fifa[] can be found as the initial item in this array.

It's important to note that the HttpClient will not automatically convert the response for you. If your intention is to return a Fifa[] from your service, then it's necessary to map your response accordingly.

return this.http.get<any[]>(fifaUrl).pipe(
  map((response: any[]) => response[0])
);

UPDATE

If your goal is to retrieve all details from the response, you should consider returning an object that conforms to the GetResponse interface within your service method (and potentially reconsidering the naming convention).

fetchAllGamesRecordPaginate(
  pageNumber: number, pageSize: number
): Observable<GetResponse> { 
  const fifaUrl = ${this.baseUrl}/demo/pageNumber/${pageNumber}/pageSize/${pageSize}; 
  return this.httpClient.get(fifaUrl).pipe( 
    map((response: any[]) => {
      const pagination = response[1];
      return {
        fifa: response[0],
        totalRecord: pagination.totalRecord,
        pageSize: pagination.pageSize,
        pageNumber: pagination.pageNumber,
        totalPages: pagination.totalPages
      };
    })
  ); 
}

In this scenario, I am interpreting the response array into an object adhering to the GetResponse interface.

Answer 2

Your answer consists of an array structure. The data representing Fifa[] can be found as the initial item in this array.

It's important to note that the HttpClient will not automatically convert the response for you. If your intention is to return a Fifa[] from your service, then it's necessary to map your response accordingly.

return this.http.get<any[]>(fifaUrl).pipe(
  map((response: any[]) => response[0])
);

UPDATE

If your goal is to retrieve all details from the response, you should consider returning an object that conforms to the GetResponse interface within your service method (and potentially reconsidering the naming convention).

fetchAllGamesRecordPaginate(
  pageNumber: number, pageSize: number
): Observable<GetResponse> { 
  const fifaUrl = ${this.baseUrl}/demo/pageNumber/${pageNumber}/pageSize/${pageSize}; 
  return this.httpClient.get(fifaUrl).pipe( 
    map((response: any[]) => {
      const pagination = response[1];
      return {
        fifa: response[0],
        totalRecord: pagination.totalRecord,
        pageSize: pagination.pageSize,
        pageNumber: pagination.pageNumber,
        totalPages: pagination.totalPages
      };
    })
  ); 
}

In this scenario, I am interpreting the response array into an object adhering to the GetResponse interface.

Answer 3

Answer №2

To have the function solely give back an Observable<Fifa[]>, implement a map operator on your Observable:

return this.httpClient.get<GetResponse>(fifaUrl).pipe(
  map((data) => data.fifa)
);

Answer 4

To have the function solely give back an Observable<Fifa[]>, implement a map operator on your Observable:

return this.httpClient.get<GetResponse>(fifaUrl).pipe(
  map((data) => data.fifa)
);

Answer 5

Answer №3

Make sure to update the return type to Observable<GetResponse> and then map the response to fit the GetResponse structure.

fetchAllGamesRecordPaginate(pageNumber:number,pageSize: number):Observable<GetResponse>{ 
  const fifaUrl = ${this.baseUrl}/demo/pageNumber/${pageNumber}/pageSize/${pageSize}; 
  return this.httpClient.get(fifaUrl)
    .pipe(([fifa,paginationInfo]) => (
      {
       fifa ,
       ...paginationInfo
       }
     )
    ); 
}

The API returns an array with two items – the first being the fifa[] array and the second being an object containing pagination information.

Answer 6

Make sure to update the return type to Observable<GetResponse> and then map the response to fit the GetResponse structure.

fetchAllGamesRecordPaginate(pageNumber:number,pageSize: number):Observable<GetResponse>{ 
  const fifaUrl = ${this.baseUrl}/demo/pageNumber/${pageNumber}/pageSize/${pageSize}; 
  return this.httpClient.get(fifaUrl)
    .pipe(([fifa,paginationInfo]) => (
      {
       fifa ,
       ...paginationInfo
       }
     )
    ); 
}

The API returns an array with two items – the first being the fifa[] array and the second being an object containing pagination information.

Navigating Angular: Uncover the Secrets of Unwrapping Json Data

Answer №1

Answer №2

Answer №3

Similar questions

The value produced by the interval in Angular is not being displayed in the browser using double curly braces

Encountering the identical error message while attempting to execute my application: "Uncaught TypeError: this.microservicesModule.register is not a function."

PHP code to find the count of a specific value in an array stored within

Error occurred after attempting to make a GET request

Formatting Generics for JSON Conversion in Scala Play

I need to change a website into a string so that I can analyze it with javascript. How can I do this?

Issue with displaying error message and disabling button as Keyup event fails to trigger

What is the best way to choose a particular radio button from a group of radio buttons using typescript?

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

Comparing angular2/core and @angular/core: What sets them apart?

Deciphering the LocalDate and nested object array in an AJAX response

Unable to fetch data using getJSON method

There was an issue with Angular 2.0 at :0:0, which was caused by a response with status: 0 from the URL: null

How can you securely transfer the ARRAY OBJECT from JavaScript to PHP using Ajax?

Using the `disableSince` option in `mydatepicker` for validating date of birth

Testing the value of an input in Angular using unit tests

Create a single JSON object by searching through two collections in MongoDB

Intellisense missing in VSCode for Angular and typings

Using Stringify to modify the value of a particular array in Local Storage

Guide for converting a JavaScript function with spread arguments of different types to C# style