Convert json array to json object in service in angular 2+

Question

I have a service that gets the result in an API. API returns the results as JSON array. But I need the result as JSON object.

API returns:

[{"record_id":"101","demographics_spring_complete":"2"}]

I need as object format:

{"record_id":"101","demographics_spring_complete":"2"}

My service.ts:

getStatus() {
    return this.http.post(this.baseUrl).map(res => res.json())
        .catch(this.handleError);
}

And my conponent.ts:

export class BaselineListComponent implements OnInit {  
statuses: any[] = []; 

constructor(
   public recordService: RecordsService
 ) { }

 loadStatus() {
    this.recordService.getStatus('demographic_spring', 'baseline_visit_a_arm_1', 101).subscribe(statuses => {
  this.statuses = statuses;
  console.log(this.statuses);
   });
  }
}

I did try some conversion options but since API returns an array, I am unable to convert them to a JSON object. Any help would be appreciated.

Sajeetharan · Accepted Answer · 2018-07-02 16:41:51Z

1

It seems you need the first Object of the array, use array[index] as follows,

loadStatus() {
    this.recordService.getStatus('demographic_spring', 'baseline_visit_a_arm_1', 101).subscribe(statuses => {
     this.statuses = statuses;
     console.log(this.statuses[0]);
   });
}

answered Jul 2, 2018 at 16:41

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

Sachila Ranawaka · Accepted Answer · 2018-07-02 16:30:25Z

1

Add a do operator and return the first element.

getStatus() {
    return this.http.post(this.baseUrl).map(res => res.json())
        .do(res => res[0])
        .catch(this.handleError);
}

answered Jul 2, 2018 at 16:30

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

GoGo Over a year ago

That still gives me as an array.

Tariqul Islam · Accepted Answer · 2018-07-02 17:22:45Z

Create model class (record.model.js)

export class Record {
   constructor(
    record_id: string,
    demographics_spring_complete : string,
   ){}
}

At Service.js Class You need to code like this:

Import some Library at Service.js class

import { Record } from '../models/record.model'
import 'rxjs'
import { Observable } from 'rxjs/Rx'

create the functions to get the record

   getRecords(): Observable<Record[]> {
    return this.http.get(this.userApiUrl)
            .map((res: Response) => res.json())
            .catch((error: any) => Observable.throw(error.json().error || 'Server Error'))
  }

In the component.ts file Add global variable:

record: Record;

then subcribe the record function of service

getRecord(): void {
 this.recordService.getRecords().subscribe((result: any) => {
    this.record = result && result[0] || {};
 }, (error: any) => {
   console.log(error);
 });
}

if the result return [{"record_id":"101","demographics_spring_complete":"2"}], result[0] will return {"record_id":"101","demographics_spring_complete":"2"}, but if the result has not value undefiend execption will be occured, we will use this.record = result && result[0] || {}; to handled the execption.

Collectives™ on Stack Overflow

Convert json array to json object in service in angular 2+

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related