Extract the JSON array data from the Service and process it within the Component

Question

Extract the JSON array data from the Service and process it within the Component

When passing a response from the Service to the Component for display on the UI, each value needs to be parsed and stored in a variable. This can be achieved by extracting values such as profileId, profileName, regionName, etc. from the response.

[{"profileId":"000234","profileName":"kofi prfl","regionName":"NA  ","fileType":"GRRCN","fileVersion":"1.01","fileFreq":"D01","fileFormat":"FIX","emptyFile":"N","cardMask":"Y","uprInd":"N","dataLevel":"01"}]

this.profileDetailsService.getProfileDetails(this.idDisplay)
      .subscribe(profileResponse => {
          // Parsing of the profileResponse should occur in this section....
          this.searchResult = profileResponse;
          this.spinnerService.hide();
        },
      error => {
          this.spinnerService.hide();
          this.showError();
        }
      );

Is there a way to separate the values for profileId, profileName, regionName, etc.?

json angular object typescript

Answer 1

Answer №1

Instead of having this snippet in your code:

...
this.searchResult = profileResponse;
...

You could opt for the following approach:

searchResult: any[];

...
this.searchResult = profileResponse.json() || {}
...

After that, you will be able to access each property through the searchResult item:

this.searchResult[0].profileId, etc

Answer 2

Instead of having this snippet in your code:

...
this.searchResult = profileResponse;
...

You could opt for the following approach:

searchResult: any[];

...
this.searchResult = profileResponse.json() || {}
...

After that, you will be able to access each property through the searchResult item:

this.searchResult[0].profileId, etc

Answer 3

Answer №2

Revise following a comment code update:

An issue arises when attempting to access the properties of searchResult due to the service returning a response instead of a Javascript object with defined properties.

The Angular HTTP documentation found here, explains:

The response data is in JSON string format. It needs to be converted into JavaScript objects using response.json().

Recommendation is to parse the response within the service to consolidate all related http request functionalities and avoid redundancy in code.

Previous Code Snippet:

return this.http.post(this._url, body, options).map((response: Response) => {
    return response;
}).catch((error) => {
    return Observable.throw(error);
});

To address this (assuming only the first profile in the array is needed):

 return this.http.post(this._url, body, options).map((response: Response) => {
        return response.json()[0];
    }).catch((error) => {
        return Observable.throw(error);
    });

The updated code now properly parses the JSON object, fetching the initial object from the array utilizing .json()[0]. Alongside, change profileResponse to profileDetails, allowing direct access to this.searchResult's properties through dot notation:

Example usage in another component function:

console.log(this.searchResult.profileName)

Sample template usage: {{searchResult.profileName}}

Answer 4

Revise following a comment code update:

An issue arises when attempting to access the properties of searchResult due to the service returning a response instead of a Javascript object with defined properties.

The Angular HTTP documentation found here, explains:

The response data is in JSON string format. It needs to be converted into JavaScript objects using response.json().

Recommendation is to parse the response within the service to consolidate all related http request functionalities and avoid redundancy in code.

Previous Code Snippet:

return this.http.post(this._url, body, options).map((response: Response) => {
    return response;
}).catch((error) => {
    return Observable.throw(error);
});

To address this (assuming only the first profile in the array is needed):

 return this.http.post(this._url, body, options).map((response: Response) => {
        return response.json()[0];
    }).catch((error) => {
        return Observable.throw(error);
    });

The updated code now properly parses the JSON object, fetching the initial object from the array utilizing .json()[0]. Alongside, change profileResponse to profileDetails, allowing direct access to this.searchResult's properties through dot notation:

Example usage in another component function:

console.log(this.searchResult.profileName)

Sample template usage: {{searchResult.profileName}}

Extract the JSON array data from the Service and process it within the Component

Answer №1

Answer №2

Similar questions

Steps to create a dynamic Datatable using Jquery

Filling the text and value array using a collection of objects

Having trouble launching my node application on port 80 on Ubuntu 16.04

How to Transform the Body-Format of a POST Request in Service Stack

Error: Trying to access the 'checked' property of an undefined variable

Creating a Connection between Angular 4 and MySQL Database using PHP for Data Posting

The parser encountered an unexpected token while attempting to parse the provided string

How is it possible to leverage the CDN URL mechanism for package management when working with Typescript?

What is the process of substituting types in typescript?

Automatically generate a file path for imports using the class name

In a local setting, the KendoUI chips are displaying without their borders

Tips for saving multiple pieces of data in a single field with Laravel

Guide to making a sidebar for your chrome extension using Angular, no need for an iframe

React and Express are two powerful technologies that work seamlessly

Jenkins is experiencing issues with starting up or reconnecting - It is hanging and displaying a severe error message: unable to properly read the JSON file provided at [/var/lib/jenkins/cb-envelope/envelope.json]

Why does Angular throw a NullReferenceException when calling User.FindFirst(ClaimTypes.NameIdentifier), whereas Postman executes the same code without any

Guide on removing a key from an object in TypeScript

Converting a string to a data type in Typescript: A beginner's guide

Encountering a problem when trying to use event.target.value in an Angular TypeScript application

The correct method for handling arrays with overlapping types and narrowing them down again