Parse the JSON array object from the Service in the Component

Question

This is the response I am passing from the Service to the Component where i should display each value to the UI. I need to parse each value and store to a variable.

[{"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 => {
          // Should parse the profileResponse here....
          this.searchResult = profileResponse;
          this.spinnerService.hide();
        },
      error => {
          this.spinnerService.hide();
          this.showError();
        }
      );

How to separate profileId, profileName, regionName etc., values?

Any chance you can post more code? Can I see your service, template and component? — SpaceFozzy
– SpaceFozzy, Commented Jun 22, 2017 at 1:00

Joseph Wu · Accepted Answer · 2017-06-22 01:54:15Z

2

instead of in your code:

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

you can use:

searchResult: any[];

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

then you can access each property via searchResult item:

this.searchResult[0].profileId, etc

answered Jun 22, 2017 at 1:54

Joseph Wu

5,0581 gold badge25 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Poonkodi Sivapragasam Over a year ago

That worked like a charm! Was struggling for almost 8 hours with this. Thank you!

SpaceFozzy · Accepted Answer · 2017-06-22 05:05:47Z

0

Update based on comment code:

The reason you're not able to access the properties of searchResult is that the service is returning a response rather than a Javascript object with properties.

From the HTTP Angular docs here:

The response data are in JSON string form. The app must parse that string into JavaScript objects by calling response.json().

I suggest parsing the response in the service to keep things related to the http request there and prevent code duplication.

Change:

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

To this (if indeed you only want the first profile in the array):

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

The new code parses the JSON object and extracts the first object from the array with .json()[0]. Then rename profileResponse to profileDetails and access this.searchResult's properties using dot notation:

e.g. From another function in the component: console.log(this.searchResult.profileName)

e.g. From your template: {{searchResult.profileName}}

edited Jun 22, 2017 at 5:05

answered Jun 21, 2017 at 23:01

SpaceFozzy

2,8281 gold badge21 silver badges21 bronze badges

4 Comments

Poonkodi Sivapragasam Over a year ago

profileResponse.profileId doesn't display the value in the field. It just shows undefined in the console.

SpaceFozzy Over a year ago

Are you sure you're returning the actual object and not a json string from your service? Does your service call response.json()?

Poonkodi Sivapragasam Over a year ago

return this.http.post(this._url, body, options) .map((response:Response) => { return response; }) .catch((error) => { return Observable.throw(error); }); this.profileDetailsService.getProfileDetails(this.idDisplay) .subscribe(profileResponse => { this.value1 = profileResponse.profileId; this.value2 = profileResponse.profileName; this.searchResult = profileResponse; console.log("stringify values is "+ JSON.stringify(this.searchResult)); this.spinnerService.hide(); } );

Poonkodi Sivapragasam Over a year ago

this is how i am passing the response from service to component.

Collectives™ on Stack Overflow

Parse the JSON array object from the Service in the Component

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related